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> 

작은 해킹, 그 공백을 무시 이러한 <!-- -->을 시도

편집 :

: 당신은 당신의 헤더에 작은 간격을 제거하려면

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

demo

Answer 2

@ Thielicious의 답변에는 훌륭한 해결책이 있습니다. 여기에 대한 설명, 그리고에 대한 답변입니다 당신이 col-9위한 충분한 공간이 모든 것이 잘 작동하지만 display: inline-block를 사용하는 경우, 요소는 다음 줄에 아래로 떨어 float: left를 사용할 때이 이유을 궁금

.

공백 문자 inline-block 사이의 요소는 렌더링 된 페이지에서 공간을 차지합니다.

크리스 Coyier는 a run down of different ways to get around this 내가 코드를 확인하지 않은