html - css 奇怪的边距

Question

有谁知道为什么在这个example

内部<div>垂直显示而不是水平显示？

我用chrome element inspect可以看到每个<div>右边都有一个巨大的空白区域, 但没有任何 margin 值。

找到这个 example

也可能是这个问题的答案。以防万一有人需要它。

Answer 1

之所以会这样，是因为您正在使用 block每个内部的布局 div ( display:block 作为 div 元素的默认值)。相反，您应该使用(例如)display:inline-block并减少 width (在我的示例中为 33%)因为它添加了一些额外的像素作为三个内部 div 之间的间距:

.cols_section > div{
   display:inline-block;
}

Example

另一种选择是使用表格布局，因此您不必更改 width对于每个内部 div:

.cols_section {
   display:table;
   width:100%;
}

.cols_section > div{
   display:table-cell;
}

Example