內嵌塊和浮動寬度/包裝行爲有所不同？

我試圖決定沒有最好的方式來使用CSS和div s做一個並排的列狀佈局。內嵌塊和浮動寬度/包裝行爲有所不同？

由於某些原因，當我使用display: inline-block;時，如果column-divs的聚合寬度等於100％，則最後一個div將包裝到下一行。但是，如果我使用浮動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>

但在這個例子中，他們並不：

<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>

同時使用Chrome和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不支持inline-block的。 – zgood

在IE7中使用這種黑客會使元素內嵌塊 .ie .col {display：inline; zoom：1;} –

我覺得有點愚蠢，但是萬分感謝！ –

內嵌塊和浮動寬度/包裝行爲有所不同？

回答

相關問題