我是第1個(gè)div元素
我是第2個(gè)div元素
我是第3個(gè)div元素
我是第1個(gè)div元素
我是第2個(gè)div元素
我是第3個(gè)div元素
資訊專欄INFORMATION COLUMN
摘要：實(shí)現(xiàn)原理紅色的個(gè)左浮動(dòng)，左右為，父容器左右為，這樣相當(dāng)于是把父容器拉長了，因此就達(dá)到了兩端對齊的效果。的柵格系統(tǒng)就是這么干的，要求我們的父容器需要為，而的左右就為。
兩端對齊效果
如上圖中紅色的9個(gè)div它們中間有間距，而最左邊和最右邊是沒有間距的，這種布局如果使用css3的flex來實(shí)現(xiàn)是非常簡單的，而如果要使用float布局就需要一些特殊的技巧了。
實(shí)現(xiàn)原理紅色的9個(gè)div左浮動(dòng)，左右margin為25px，父容器左右margin為-25px，這樣相當(dāng)于是把父容器拉長了，因此就達(dá)到了兩端對齊的效果。Bootstrap的柵格系統(tǒng)就是這么干的，bootstrap要求我們.col-xx-xx的父容器需要為.row，而.row的左右padding就為-15px。
示例代碼下面的元素會(huì)與我對齊我是第1個(gè)div元素我是第2個(gè)div元素我是第3個(gè)div元素我是第1個(gè)div元素我是第2個(gè)div元素我是第3個(gè)div元素
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/113892.html
摘要：實(shí)現(xiàn)原理紅色的個(gè)左浮動(dòng)，左右為，父容器左右為，這樣相當(dāng)于是把父容器拉長了，因此就達(dá)到了兩端對齊的效果。的柵格系統(tǒng)就是這么干的，要求我們的父容器需要為，而的左右就為。 兩端對齊效果 showImg(https://segmentfault.com/img/bVbgswx?w=1303&h=523); 如上圖中紅色的9個(gè)div它們中間有間距，而最左邊和最右邊是沒有間距的，這種布局如果使用c...
摘要：實(shí)現(xiàn)基于純實(shí)現(xiàn)的三欄布局需要將中間的內(nèi)容放在結(jié)構(gòu)的最后，否則右側(cè)會(huì)沉在中間內(nèi)容的下側(cè)原理元素浮動(dòng)后，脫離文檔流，后面的元素受浮動(dòng)影響，設(shè)置受影響元素的值即可兩邊固定寬度，中間寬度自適應(yīng)。 1 float實(shí)現(xiàn) 基于純float實(shí)現(xiàn)的三欄布局需要將中間的內(nèi)容放在HTML結(jié)構(gòu)的最后，否則右側(cè)會(huì)沉在中間內(nèi)容的下側(cè) 原理：元素浮動(dòng)后，脫離文檔流，后面的元素受浮動(dòng)影響，設(shè)置受影響元素的margi...
閱讀 2509·2021-11-16 11:44
閱讀 923·2021-09-10 11:16
閱讀 2284·2019-08-30 15:54
閱讀 1198·2019-08-30 15:53
閱讀 1967·2019-08-30 13:00
閱讀 673·2019-08-29 17:07
閱讀 3571·2019-08-29 16:39
閱讀 3206·2019-08-29 13:30
