我是第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)于是把父容器拉長(zhǎng)了，因此就達(dá)到了兩端對(duì)齊的效果。的柵格系統(tǒng)就是這么干的，要求我們的父容器需要為，而的左右就為。
兩端對(duì)齊效果
如上圖中紅色的9個(gè)div它們中間有間距，而最左邊和最右邊是沒(méi)有間距的，這種布局如果使用css3的flex來(lái)實(shí)現(xiàn)是非常簡(jiǎn)單的，而如果要使用float布局就需要一些特殊的技巧了。
實(shí)現(xiàn)原理紅色的9個(gè)div左浮動(dòng)，左右margin為25px，父容器左右margin為-25px，這樣相當(dāng)于是把父容器拉長(zhǎng)了，因此就達(dá)到了兩端對(duì)齊的效果。Bootstrap的柵格系統(tǒng)就是這么干的，bootstrap要求我們.col-xx-xx的父容器需要為.row，而.row的左右padding就為-15px。
示例代碼下面的元素會(huì)與我對(duì)齊我是第1個(gè)div元素我是第2個(gè)div元素我是第3個(gè)div元素我是第1個(gè)div元素我是第2個(gè)div元素我是第3個(gè)div元素
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113892.html
摘要：實(shí)現(xiàn)原理紅色的個(gè)左浮動(dòng)，左右為，父容器左右為，這樣相當(dāng)于是把父容器拉長(zhǎng)了，因此就達(dá)到了兩端對(duì)齊的效果。的柵格系統(tǒng)就是這么干的，要求我們的父容器需要為，而的左右就為。 兩端對(duì)齊效果 showImg(https://segmentfault.com/img/bVbgswx?w=1303&h=523); 如上圖中紅色的9個(gè)div它們中間有間距，而最左邊和最右邊是沒(méi)有間距的，這種布局如果使用c...
摘要：屬性指定了盒的區(qū)的寬度。簡(jiǎn)寫(xiě)屬性一次性設(shè)置四周的，而其它屬性只設(shè)置它們各側(cè)的。 margin屬性指定了盒的margin區(qū)的寬度。margin簡(jiǎn)寫(xiě)屬性一次性設(shè)置四周的margin，而其它margin屬性只設(shè)置它們各側(cè)的。這些屬性適用于所有元素，但非替換行內(nèi)元素上的豎直margin將不會(huì)產(chǎn)生任何效果 margin與容器尺寸 margin與可視尺寸 margin與可視尺寸 只適用于沒(méi)有設(shè)定...
摘要：實(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...
閱讀 2418·2021-11-16 11:44
閱讀 852·2021-09-10 11:16
閱讀 2228·2019-08-30 15:54
閱讀 1057·2019-08-30 15:53
閱讀 1900·2019-08-30 13:00
閱讀 620·2019-08-29 17:07
閱讀 3514·2019-08-29 16:39
閱讀 3138·2019-08-29 13:30
