當(dāng)我們使用float來(lái)使元素并排顯示的時(shí)候，可以使用margin來(lái)控制元素之間的距離，而在很多版式里（例如產(chǎn)品圖片的列表），需要浮動(dòng)的元素達(dá)到兩端對(duì)齊的效果，如圖1所示。

圖1 兩端對(duì)齊的版式

單純使用float:left或者float:right，而不添加額外的class區(qū)分元素的位置，似乎是無(wú)法實(shí)現(xiàn)靠左/右的效果。

首先列出結(jié)構(gòu)：

<div class="justify"><ul><li>靠左邊</li><li>中間</li><li>靠右邊</li><li>靠左邊</li><li>中間</li><li>靠右邊</li><li>靠左邊</li><li>中間</li><li>靠右邊</li></ul> </div>

思路是：li不需要單獨(dú)的class來(lái)設(shè)定左右，而是通過(guò)擴(kuò)大ul的寬度和高度，使其溢出父層，再通過(guò)父層的overflow:hidden來(lái)隱藏多出容器的部分。

CSS

.justify { width:320px; /* 1行3個(gè)li，li之間距離10px = 100px*3 + 10px*2 */ overflow:hidden; margin:10px; border:1px solid #999999; } .justify ul { width:330px; /* 可容納下3列的寬度 */ margin-bottom:-10px;/* 隱藏掉最下面一行的margin-bottom */ overflow:hidden; zoom:1;/* 觸發(fā)IE的Layout */ } *+html .justify ul {margin-bottom:0;}/* 針對(duì)IE7中最后1行l(wèi)i的margin-bottom失效 */ .justify li { display:inline;float:left;list-style:none; width:100px;height:100px;margin:5px; background:#EEEEEE;}

其實(shí)，用圖2來(lái)解釋更直觀一些：

圖2 實(shí)現(xiàn)原理

提示：IE7內(nèi)最后一行l(wèi)i的margin-bottom應(yīng)該會(huì)被IE吃掉，所以u(píng)l就不需要margin-bottom了。

此處需注意的是調(diào)整div的寬度的同時(shí)也要調(diào)整ul的寬度。

或者不設(shè)定ul的寬度而是用負(fù)marign值來(lái)達(dá)到擴(kuò)大ul寬度的效果。

非浮動(dòng)和定位的塊級(jí)元素，其width值為auto（默認(rèn)值）時(shí)，會(huì)盡量充滿父元素的內(nèi)容框，也就是說(shuō)當(dāng)沒(méi)有border/padding/margin時(shí)，width是100%。
計(jì)算公式：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-rigth=包含塊的寬度（div的width）
因此如果設(shè)定ul的margin-right為-10px，其他padding/margin/border都為0，則：
ul的width=320px（div的width）-(-10px)=330px
代碼如下：

.justify {......} .justify ul { margin:0 -10px -10px 0; overflow:hidden; zoom:1;/* 觸發(fā)IE的Layout */ } .justify li {......}

這樣的優(yōu)點(diǎn)在于，只要調(diào)整最外層div的寬度，就可以實(shí)現(xiàn)2列或者4列的效果。

轉(zhuǎn)載于:https://www.cnblogs.com/lbnnbs/p/4781901.html

總結(jié)

以上是生活随笔為你收集整理的浮动元素的均匀分布和两端对齐的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。