CSS表示：インラインブロックが次の行にドロップされます

Question

私はテストしている簡単なグリッドを持っています。

属性セレクタ[class*='col-]でfloat: leftからdisplay: inline-blockに変更することにしました。

float: leftを使用すると、col-9のための十分なスペースがあり、すべて正常に機能するのだろうかと疑問に思っていますが、display: inline-blockを使用すると、要素は次の行にドロップされます。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.header { 
 
\t border: 1px solid red; 
 
\t padding: 15px; 
 
} 
 

 
.col-1 {width: 8.33%;} 
 
.col-2 {width: 16.66%;} 
 
.col-3 {width: 25%;} 
 
.col-4 {width: 33.33%;} 
 
.col-5 {width: 41.66%;} 
 
.col-6 {width: 50%;} 
 
.col-7 {width: 58.33%;} 
 
.col-8 {width: 66.66%;} 
 
.col-9 {width: 75%;} 
 
.col-10 {width: 83.33%;} 
 
.col-11 {width: 91.66%;} 
 
.col-12 {width: 100%;} 
 

 
[class*='col-'] { 
 
\t display: inline-block; 
 
\t padding-top: 15px; 
 
\t border: 1px solid red; 
 
}

\t <div class='header'> 
 
\t \t <h1>China</h1> 
 
\t </div> 
 
\t <div class='row'> 
 
\t \t <div class='col-3'> 
 
\t \t \t <ul> 
 
\t \t \t \t <li>The Flight</li> 
 
\t \t \t \t <li>The City</li> 
 
\t \t \t \t <li>The Island</li> 
 
\t \t \t \t <li>The Food</li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t \t <div class='col-9'> 
 
\t \t \t <h1>The City</h1> 
 
\t \t \t <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
 
\t \t \t <p>Resize the browser window to see how the content respond to the resizing.</p> 
 
\t \t </div> 
 
\t </div>

Answer 1

<div class='header'> 
     <h1>China</h1> 
    </div> 
    <div class='row'> 
     <div class='col-3'> 
      <ul> 
       <li>The Flight</li> 
       <li>The City</li> 
       <li>The Island</li> 
       <li>The Food</li> 
      </ul> 
     </div><!-- 
     --><div class='col-9'> 
      <h1>The City</h1> 
      <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
      <p>Resize the browser window to see how the content respond to the resizing.</p> 
     </div> 
    </div> 

小さなハック、それは空白に無視これら<!-- -->を試してみてください

EDIT ：

：、あなたのヘッダーに小さなギャップを削除する場合

.col-9 { 
    vertical-align: top; 
} 

demo

Answer 2

@ Thieliciousの答えは素晴らしい解を持っています。ここでfloat: leftを使用しているときがcol-9のための十分なスペースがあると、すべてがdisplay: inline-blockを使用する要素は、次の行にまで低下した場合、正常に動作しますが、なぜ私はを疑問に思って説明し、あなたの

への答えです。

空白スペースinline-blockの間の要素は、レンダリングされたページのスペースを占有します。

クリスCoyierは、私はあなたのコードをチェックしていないが、インライン要素がに敏感な