當使用子內聯塊元素時浮動不起作用

Question

我正在嘗試創建一個佈局，其中有一個側欄，如標題和介紹旁邊的網格。但是，當我嘗試使用float時，div的子元素的display：inline-block樣式似乎會導致問題（當我在子元素上使用display：block時，它會起作用）。任何替代解決方案，讚賞。

https://jsfiddle.net/e_video/hdd0wr1p/

HTML

名稱實施例

Descrition的不同主題的不同的事情。

<div class="sidebar"> 
    <h1> 
    Title Example 
    </h1> 
    <p> 
    Descrition of different things on different subjects. 
    </p> 
</div> 
<div class="card-section"> 
    <article class="card"></article> 
    <article class="card"></article> 
    <article class="card"></article> 
    <article class="card"></article> 
    <article class="card"></article> 
    <article class="card"></article> 
</div> 
<br/> 

CSS

.card{ 
    background: red; 
    width:100px; 
    height: 100px; 
    display: inline-block; 
    margin: 20px; 
} 

.card-section, 
.sidebar{ 
    float:left; 
} 

Answer 1

工作正常，你就必須申報的寬度小於100％ - https://jsfiddle.net/hdd0wr1p/2/或https://jsfiddle.net/hdd0wr1p/4/或https://jsfiddle.net/hdd0wr1p/5/

發生了什麼事......

h1是設計用來清除其他元素塊元素。默認情況下，h1是其父元素寬度的100％的塊。在這種情況下，沒有側欄上的寬度，即窗口寬度的100％。

這是h1正在清理您的浮標的標籤。通過將寬度設置爲側邊欄本身或h1標籤，浮動工作。設置側邊欄的寬度也會限制子標籤的寬度h1。

Answer 2

如果你想使用float，那麼你應該指定width太妥善clear他們以及（由@Scott給出更多的解釋）。但對於較小的顯示器，float可能會包裹（在某些情況下可能會出現在另一個之下）。請參閱下面示例代碼段：

.card{ 
 
    background: red; 
 
    width:100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
} 
 

 
.card-section, 
 
.sidebar{ 
 
    float:left; 
 
} 
 
.wrapper{ 
 
    border: 1px solid black; 
 
} 
 
.wrapper:after{ 
 
    content: ''; 
 
    clear:both; 
 
    display: block; 
 
} 
 
.card-section { 
 
    width: 65%; 
 
    } 
 
.sidebar{ 
 
    width: 35%; 
 
    }

<div class="wrapper"> 
 
<div class="sidebar"> 
 
    <h1> 
 
    Title Example 
 
    </h1> 
 
    <p> 
 
    Descrition of different things on different subjects. 
 
    </p> 
 
</div> 
 
<div class="card-section"> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
</div> 
 
</div> 
 
<div class="wrapper"> 
 
<div class="sidebar"> 
 
    <h1> 
 
    Title Example 
 
    </h1> 
 
    <p> 
 
    Descrition of different things on different subjects. 
 
    </p> 
 
</div> 
 
<div class="card-section"> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
</div> 
 
</div>

如果你不想讓他們來包裝，並希望他們並排使用table或flexbox ES，你會不會需要關心width s。下面的示例表解決方案：

.card { 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
} 
 
.wrapper { 
 
    display: table; 
 
    border: 1px solid black; 
 
} 
 
.card-section, 
 
.sidebar { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
}

<div class="wrapper"> 
 
    <div class="sidebar"> 
 
    <h1> 
 
    Title Example 
 
    </h1> 
 
    <p> 
 
     Descrition of different things on different subjects. 
 
    </p> 
 
    </div> 
 
    <div class="card-section"> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    </div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="sidebar"> 
 
    <h1> 
 
    Title Example 
 
    </h1> 
 
    <p> 
 
     Descrition of different things on different subjects. 
 
    </p> 
 
    </div> 
 
    <div class="card-section"> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    <article class="card"></article> 
 
    </div> 
 
</div>