亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css float left布局換行不正常問題的解決

  發(fā)布時間：2018-09-06 15:11:10   作者：江湖游醫(yī)黃半仙   我要評論
這篇文章主要介紹了css float left布局換行不正常問題的解決的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近遇到一個頁面布局上的問題,后來模擬了一下還原了下出現(xiàn)的原因。本來大概想實現(xiàn)的布局大概是這樣的

結果出現(xiàn)了這樣的情況

頁面的html是這樣的 

<div class="block">
        <div></div>
    </div>
    <div class="block">
        <div></div>
    </div>
    <div class="block">
        <div></div>
    </div>
    <div class="block" >
        <div id="special"></div>
    </div>
    <div class="block">
        <div></div>
    </div>
    <div class="block">
        <div></div>
    </div>

css

.block {

            width: 25%;
            padding: 10px;
            float: left;
            box-sizing: border-box;

        }
        .block div {
            background-color: pink;
            width: 100%;
            height: 280px;
        }
        #special {
            height: 280px;
            background-color: green;
        }

這樣的代碼布局如最開始的圖是正常的，但當special的height小于280px時就會變得不正常。

然后去看了下float的定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動的邊框為止。

也就是本來第二行的想float到左邊，然后碰上了第三塊，然后就停下了。第二行后面的就被擠到第三行了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • css浮動 float屬性詳解

    浮動指的是一個元素脫離文檔流，懸浮在父元素之上的現(xiàn)象。這篇文章給大家介紹css浮動 float屬性的相關知識，感興趣的朋友一起看看吧
    2020-02-24

  • html/css中float浮動的用法實例詳解

    這篇文章主要介紹了html/css中float浮動的用法實例詳解,需要的朋友可以參考下
    2019-09-10

  • css 布局 之 兩端布局的實例代碼 （利用父級負的margin）

    這篇文章主要介紹了css 布局 之 兩端布局 （利用父級負的margin）的實例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋
    2020-06-08

  • 解決CCS中的margin：top塌陷問題

    這篇文章主要介紹了CCS中的margin：top塌陷問題,本文通過實例截圖給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-03-27

  • css中子元素設置margin-top為什么影響了父元素

    這篇文章主要介紹了css中子元素設置margin-top為什么影響了父元素，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著
    2019-05-22

  • 詳解css外邊距折疊（margin collapsing）

    外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現(xiàn)，分為3種情況，非常具有實用價值，需要的朋友可以參考下
    2018-10-30

  • CSS 同級元素position:fixed和margin-top共同使用的問題

    這篇文章主要介紹了CSS 同級元素position:fixed和margin-top共同使用的問題的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-13

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

    這篇文章主要介紹了詳解css使既有浮動又有左右margin的多個元素兩端對其,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-07

  • CSS中的float和margin的混合使用示例代碼

    這篇文章主要介紹了CSS中的float和margin的混合使用，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-06-12

最新評論