首頁 > 網頁教程 > CSS > 在CSS中設置浮動元素兩端對齊的2種方法分享

在CSS中設置浮動元素兩端對齊的2種方法分享

時間:2013-12-09    來源:豆豆貓的窩

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

圖1 兩端對齊的版式

圖1 兩端對齊的版式

單純使用float:left或者float:right,而不添加額外的class區分元素的位置,似乎是無法實現靠左/右的效果。

首先列出結構:

<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來設定左右,而是通過擴大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;/* 觸發IE的Layout */
}
*+html .justify ul {margin-bottom:0;}/* 針對IE7中最后1行li的margin-bottom失效 */
.justify li {
display:inline;float:left;list-style:none;
width:100px;height:100px;margin:5px;
background:#EEEEEE;}

其實,用圖2來解釋更直觀一些:

圖2 實現原理

圖2 實現原理

提示:IE7內最后一行li的margin-bottom應該會被IE吃掉,所以ul就不需要margin-bottom了。

此處需注意的是調整div的寬度的同時也要調整ul的寬度。

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

非浮動和定位的塊級元素,其width值為auto(默認值)時,會盡量充滿父元素的內容框,也就是說當沒有border/padding/margin時,width是100%。
計算公式:
margin-left+border-left+padding-left+width+padding-right+border-right+margin-rigth=包含塊的寬度(div的width)
因此如果設定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;/* 觸發IE的Layout */
}
.justify li {......}

這樣的優點在于,只要調整最外層div的寬度,就可以實現2列或者4列的效果。

相關推薦
CSS清除浮動屬性的方法及例子
IE瀏覽器下CSS布局清除浮動新說
css教程:解決float屬性的元素父元素高度不能自適應
CSS教程:清理浮動簡潔有效的方式分享
8種CSS清除浮動的方法優缺點分析
CSS樣式的postion屬性absolute和fixed的區別
CSS的Z-index屬性深度解剖
揭開CSS定位屬性Position的神秘面紗
用CSS相對定位實現交叉層疊的兩個層效果
CSS中定位屬性Position的用法實例
CSS相對定位實現div容器絕對居中的簡單方法分享

精彩推薦

熱門教程

北京pk10走势图下载 北京pk拾永久免费计划 亿客隆彩票首页 广东十一选五 飞艇五码在线搞准计划版 新快3怎么投注和值 深圳风采 股票涨跌指数怎么看 分分彩稳赚的三大技巧 乐享棋牌北京麻将 pk10极速赛车计划软件 扑克麻将绝技教学 14场足球比分直播