成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css使既有浮動又有左右margin的多個元素兩端對其

Galence / 3518人閱讀

摘要：實現(xiàn)原理紅色的個左浮動，左右為，父容器左右為，這樣相當于是把父容器拉長了，因此就達到了兩端對齊的效果。的柵格系統(tǒng)就是這么干的，要求我們的父容器需要為，而的左右就為。

兩端對齊效果

如上圖中紅色的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。

示例代碼 


下面的元素會與我對齊

    

        

            
我是第1個div元素

            
我是第2個div元素

            
我是第3個div元素

            
我是第1個div元素

            
我是第2個div元素

            
我是第3個div元素

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113892.html

相關文章

  • css使既有浮動又有左右margin的多個元素兩端對其

    摘要：實現(xiàn)原理紅色的個左浮動，左右為，父容器左右為，這樣相當于是把父容器拉長了，因此就達到了兩端對齊的效果。的柵格系統(tǒng)就是這么干的，要求我們的父容器需要為，而的左右就為。 兩端對齊效果 showImg(https://segmentfault.com/img/bVbgswx?w=1303&h=523); 如上圖中紅色的9個div它們中間有間距，而最左邊和最右邊是沒有間距的，這種布局如果使用c...

    zhiwei 評論0 收藏0

  • margin詳解

    摘要：屬性指定了盒的區(qū)的寬度。簡寫屬性一次性設置四周的，而其它屬性只設置它們各側的。 margin屬性指定了盒的margin區(qū)的寬度。margin簡寫屬性一次性設置四周的margin，而其它margin屬性只設置它們各側的。這些屬性適用于所有元素，但非替換行內(nèi)元素上的豎直margin將不會產(chǎn)生任何效果 margin與容器尺寸 margin與可視尺寸 margin與可視尺寸 只適用于沒有設定...

    stonezhu 評論0 收藏0

  • CSS || 三欄布局，兩邊固定，中間自適應

    摘要：實現(xiàn)基于純實現(xiàn)的三欄布局需要將中間的內(nèi)容放在結構的最后，否則右側會沉在中間內(nèi)容的下側原理元素浮動后，脫離文檔流，后面的元素受浮動影響，設置受影響元素的值即可兩邊固定寬度，中間寬度自適應。 1 float實現(xiàn) 基于純float實現(xiàn)的三欄布局需要將中間的內(nèi)容放在HTML結構的最后，否則右側會沉在中間內(nèi)容的下側 原理：元素浮動后，脫離文檔流，后面的元素受浮動影響，設置受影響元素的margi...

    pcChao 評論0 收藏0

  • 前端

    摘要：在每個元素后面插入藍色的選擇器選擇器向選定的元素之前插入內(nèi)容。具體的選擇器權重計算方式如下內(nèi)聯(lián)樣式選擇器類選擇器元素選擇器權重計算永不進位。CSS簡介 css指的是層疊樣式表(Cascading Style Sheets). CSS語法 CSS語法主要由兩個部分組成：選擇器和聲明(一條或多條聲明). 選擇器一般是自己需要改變樣式的HTML元素；每一條聲明包括屬性和屬性值，屬性和屬性值之間用...

    番茄西紅柿 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<