Question

我正在根据百分比创建列。例如，我有两列50％。这些应该加起来100％并且适合在同一行。

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

然而，由于某种原因，第二列被推到下一行。如果我将宽度减小到49.5％，那么两列就会合在一起。

三列的问题相同，如果我将其设置为33.3％，则最后一列会被推翻。如果我把它减少到32.8％，它们都适合。在这两种情况下，宽度右侧都有一个小间隙，因为它们不会完全相加到100％。

这些列都在一行中，宽度设置为100％。我想知道可能导致这个问题的原因是什么？我正在使用Bootstrap，这可能会影响它..？

Answer 1

如果两个分区或其他块级元素具有50％width和float，则它们将彼此相邻。如果您没有float为这两个元素添加float: left;。如果您为这两个元素指定了float: left;和width: 50%;，则子内容会溢出。使用Firebug的DOM检查器开始从这些父元素中删除子元素，直到修复布局为止，然后您将知道在哪里继续以纠正这种情况。

Answer 2

当两个（或更多）对应元素具有position: inline-block时，其结尾/开始标记之间的所有空格都会影响它们之间的空格。避免这种情况的唯一方法是在文本编辑器中删除这些元素之间的所有空格，如下所示：

<div>
    blah blah
</div><div>
    blah2 blah2
</div>

而不是

<div>
    blah blah
</div><!-- Here is white-space (new line) -->
<div>
    blah2 blah2
</div>

响应列没有加起来..？

2 个答案: