你的位置:首页 > 网页设计

[网页设计]多个div在同一行以相同间隔分布


多个div在同一行以相同间隔分布:
这样的布局效果使用非常的频繁,也就是让多个div在一行分布,并且div于div之间的间隙是一样的,多用在对于产品的展示之用,下面就介绍一下如何实现此中布局,代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>div均匀分布代码实例-蚂蚁部落</title> <style type="text/css"> *{ margin:0px; padding:0px;}#box{ width:430px; height:200px; background-color:red; overflow:hidden; margin:100px;}#box ul{ width:440px;}#box ul li{ width:100px; height:100px; background-color:green; float:left; margin-right:10px; list-style:none;}</style> </head> <body> <div id="box"> <ul>  <li></li>  <li></li>  <li></li>  <li></li> </ul></div></body> </html>

以上代码实现了我们的要求,li元素能够均匀的分布在div中,并且中间的间隔是相同的。
原理非常的简单,就是让li左浮动,然后设置margin-right属性值,也就是li元素之间的间隔,并且div元素具有overflow:hidden属性,这样超出margin-right部分恰好被隐藏,这样就实现了右端没有空白的效果。

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0521/2134.html