詳解css使既有浮動又有左右margin的多個元素兩端對其
發(fā)布時間：2018-09-07 15:14:04 作者：heath_learning 
我要評論
我要評論這篇文章主要介紹了詳解css使既有浮動又有左右margin的多個元素兩端對其,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
兩端對齊效果
如上圖中紅色的9個div它們中間有間距，而最左邊和最右邊是沒有間距的，這種布局如果使用css3的flex來實現(xiàn)是非常簡單的，而如果要使用float布局就需要一些特殊的技巧了。
實現(xiàn)原理
紅色的9個div左浮動，左右margin為25px，父容器左右margin為-25px，這樣相當于是把父容器拉長了，因此就達到了兩端對齊的效果。Bootstrap的柵格系統(tǒng)就是這么干的，bootstrap要求我們.col-xx-xx的父容器需要為.row，而.row的左右padding就為-15px。
示例代碼
<style type="text/css">
*{margin: 0;padding: 0;}
.container{
width: 1300px;
margin: 0 auto;
background-color: #f90;
}
.header{
width: 1000px;
height: 40px;
margin: 0 auto;
background-color: #eee;
}
.main{
width: 1000px;
margin: 0px auto;
background-color: #f60;
}
.box{
/*給.box設(shè)置左右margin為負的就是為了沖突掉最左邊元素的margin-left和最右邊元素的margin-right*/
margin: 0 -1.6666667%;
}
.box::after,
.box::before{display: table;content: " ";}
.box::after{clear: both;}
.item{
width: 30%;
height: 200px;
margin: 20px 1.6666667%;
background-color: #f10;
float: left;
}
</style>
<div class="container">
<div class="header">下面的元素會與我對齊</div>
<div class="main">
<div class="box">
<div class="item">我是第1個div元素</div>
<div class="item">我是第2個div元素</div>
<div class="item">我是第3個div元素</div>
<div class="item">我是第1個div元素</div>
<div class="item">我是第2個div元素</div>
<div class="item">我是第3個div元素</div>
</div>
</div>
</div>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
浮動指的是一個元素脫離文檔流，懸浮在父元素之上的現(xiàn)象。這篇文章給大家介紹css浮動 float屬性的相關(guān)知識，感興趣的朋友一起看看吧2020-02-24
這篇文章主要介紹了html/css中float浮動的用法實例詳解,需要的朋友可以參考下2019-09-10
這篇文章主要介紹了css float left布局換行不正常問題的解決的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-06
css 布局 之 兩端布局的實例代碼 （利用父級負的margin）
這篇文章主要介紹了css 布局 之 兩端布局 （利用父級負的margin）的實例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋2020-06-08
這篇文章主要介紹了CCS中的margin：top塌陷問題,本文通過實例截圖給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-27
css中子元素設(shè)置margin-top為什么影響了父元素
這篇文章主要介紹了css中子元素設(shè)置margin-top為什么影響了父元素，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著2019-05-22
外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現(xiàn)，分為3種情況，非常具有實用價值，需要的朋友可以參考下2018-10-30
CSS 同級元素position:fixed和margin-top共同使用的問題
這篇文章主要介紹了CSS 同級元素position:fixed和margin-top共同使用的問題的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-13
這篇文章主要介紹了CSS中的float和margin的混合使用，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-12
