인라인 블록 및 부동 너비/줄 바꿈이 다르게 동작합니까?

나는 CSS와 div을 사용하여 나란히 배열 된 레이아웃을 만드는 가장 좋은 방법을 결정하려고 애 쓰지 않습니다.인라인 블록 및 부동 너비/줄 바꿈이 다르게 동작합니까?

display: inline-block;을 사용할 때 column-div의 집계 너비가 100 % 인 경우 마지막 div가 다음 줄로 줄 바꿈됩니다. 그러나 부동 div를 사용하는 경우 동일한 너비로도 이러한 일이 발생하지 않습니다.

<html> 

    <head> 

     <link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" /> 

     <style type="text/css"> 

      .column { width: 50%; 
         display: inline-block; 
        } 

     </style> 

    </head> 

    <body> 

     <div class="column"> 

      Column 1 

     </div> 

     <!-- This div is on the second line --> 
     <div class="column"> 

      Column 2 

     </div> 

    </body> 

</html>

을하지만,이 예제에서 그들은하지 않습니다 : 예를 들어

,이 예에서 두 개의 div의 서로 다른 행에 표시

<html> 

    <head> 

     <link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" /> 

     <style type="text/css"> 

      .column { width: 50%; 
         float: left; 
        } 

     </style> 

    </head> 

    <body> 

     <div class="column"> 

      Column 1 

     </div> 

     <div class="column"> 

      Column 2 

     </div> 

    </body> 

</html>

크롬과 IE8을 모두 사용.

왜 이런 일이 발생합니까?

출처

2012-06-06 Robert Allan Hennigan Leahy

인라인 블록은 마크 업에서 공백을 고려합니다.

<div class="column">Column 1</div><div class="column">Column 2</div>

이

출처

2012-06-06 17:50:40 BlakeGru

나중에이 작품을 어떻게 볼하지만, IE7은 인라인 블록을 지원하지 않는다는 점에 유의하십시오보십시오. – zgood

IE7에서이 해킹을 사용하면 요소가 인라인 블록이됩니다. .ie .col {display : inline; zoom : 1;} –

나는 다소 어리 석음을 느낀다. –

인라인 블록 및 부동 너비/줄 바꿈이 다르게 동작합니까?

답변

관련 문제