Question

有谁知道这个example

中的原因

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

我使用chrome元素检查可以看到每个<div>右侧的巨大边距区域，但没有任何边际值。

也可能是这个问题的答案。以防任何人需要它。

Answer 1

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

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

Example

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

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

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

Example

Answer 2

将每个类的宽度设置为auto。这应该可以解决你的问题..

示例：

.cols_section {
    max-width: 1045px;
    height: 100px;
}

.col1 {
  background: green;
    width: auto;
    height: 100px;
}

.col2 {
  background: yellow;
    width: auto;
    height: 100px;
}

.col3 {
  background: blue;
    width: auto;
    height: 100px;
}

css奇怪的边缘

2 个答案: