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

圖1 兩端對齊的版式

單純使用float:left或者float:right，而不添加額外的class區(qū)分元素的位置，似乎是無法實現(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不需要單獨的class來設(shè)定左右，而是通過擴大ul的寬度和高度，使其溢出父層，再通過父層的overflow:hidden來隱藏多出容器的部分。

CSS

.justify { width:320px; /* 1行3個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;}/* 針對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;}

其實，用圖2來解釋更直觀一些：

圖2 實現(xiàn)原理

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

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

或者不設(shè)定ul的寬度而是用負marign值來達到擴大ul寬度的效果。

非浮動和定位的塊級元素，其width值為auto（默認值）時，會盡量充滿父元素的內(nèi)容框，也就是說當沒有border/padding/margin時，width是100%。
計算公式：
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ào)整最外層div的寬度，就可以實現(xiàn)2列或者4列的效果。

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

總結(jié)

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

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