Question

我正在努力寻找DIV。我有五个DIV，宽度为30px，并希望将这些DIV放入150px宽的另一个DIV中。听起来很简单，但我发现五个DIV不合适。

5 * 30 = 150（但它需要166px的外部div以使它们适合内联）

<div class="A">
    <div class="B" >a</div>
    <div class="B" >b</div>
    <div class="B" >c</div>
    <div class="B" >d</div>        
    <div class="B" >e</div>
    <div class="B" >f</div>
</div>

div.A { background-color: Red; width: 150px;}
div.B { display: inline-block; height: 20px; width: 30px;}

我有什么遗失的吗？我无法理解为什么浏览器会以他们的方式进行空间化。

Answer 1

当您将div转换为内联元素时，其他内联内容也将发挥作用，即元素之间的空白区域。你在每个div之间得到一个空格，它会占用更多的像素。

如果删除div之间的空白区域，它们之间将没有空格，并且五个元素适合150像素：

http://jsfiddle.net/SLq6z/1/

Answer 2

您可以将display:inline-block替换为float:left而不会引起任何其他问题吗？它解决了你当前的问题...

div.B { float:left; height: 20px; width: 30px;}

Answer 3

对A和B类使用float:left属性;）。

Answer 4

看起来非常类似于以下内容： display: inline-block extra margin

Div间距问题

4 个答案: