0

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

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

但是，由于某种原因，第二列被推到下一行。如果我将宽度减小到 49.5%，那么这两列就可以组合在一起。

三列同样的问题，如果我将它设置为 33.3%，最后一列会被推倒。如果我将其降低到 32.8%，它们都适合。在这两种情况下，宽度右侧都有一个小间隙，因为它们加起来并不完全等于 100%。

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

4

2 回答 2

0

如果两个分区或其他块级元素有 50% width，float它们将彼此相邻出现。如果您没有float添加float: left;到这两个元素。如果您对这两个元素都有float: left;并width: 50%;指定，那么子内容就会溢出。使用 Firebug 的 DOM 检查器开始从这些父元素中删除子元素，直到布局被修复，然后您将知道该移至何处以纠正这种情况。

于 2013-10-03T15:57:04.243 回答
0

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

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

而不是这个

<div>
    blah blah
</div><!-- Here is white-space (new line) -->
<div>
    blah2 blah2
</div>
于 2013-10-03T16:05:06.547 回答