Question

这是jsfiddle

see jsfiddle

有谁能说我为什么每行看到3个元素。似乎应该有4因为width是25％。以及如何解决它？也许有人知道如何用bootstrap列实现这样的东西？

我正试图从中心对齐未知数量的div s ..

Answer 1

您看到的效果是由于HTML布局了内联块（实际上是所有内联元素），它们之间的任何数量的空白都被识别为单个空格字符，其宽度由内联上下文的font-size和family。

因此，即使每个内联块正好是其容器宽度的25％，但它们之间的空间迫使它们中的4个的总宽度超过容器宽度的100％，所以第四个下降到下一行。

这是使用内联块进行布局的祸根。这里有一些如何解决这个问题的建议： Ignore whitespace in HTML。亮点包括：

将容器的font-size设置为0，然后将子容器重置为需要的容量。
将所有子元素保存在一行文本中（换行符读取为空格），它们之间没有空格。注意：如果您使用的是反向或字体结束模板系统，可能会有工具支持这一点，以便您的源代码具有换行符，但在浏览器中发送或呈现的内容却没有。
使用HTML注释排除您在源代码中的内联块之间留下的换行符和制表符/空格（不优雅且难以维护）。

该问题的其他一些答案提出了使用除了内联块之外的其他内容来处理布局的技术，例如： float和flex。这些也很好，但是内联块的某些方面可能使它值得努力让它们起作用，即：

您可以使用vertical-align属性来控制垂直对齐（优于浮点数）
可变高度的项目将以可预测的方式彼此相邻（优于浮动）
可以留下每个元素的宽度以确定每个元素之间的间距（优于弯曲的优势）

Answer 2

问题是由于<div>属性导致空间的inline-block之间的中断。请尝试以下方法：

<div class="row">
    <div>Q</div><div>W</div><div>E</div><div>R</div>
</div>

然后，您将连续有四个<div>，其间没有空格。

或者，您可以将周围<div>的字体大小减小为零：

.row {
  text-align: center;
  font-size: 0px;
}
.row > div {
  display: inline-block;
  background-color: #EEE;
  width: 25%;
  padding: 0;
  margin: 0;
  font-size: 12px;
}

Answer 3

而不是inline-block做浮动：

.row > div {
    /* display: inline-block; */
    background-color: #EEE;
    width: 25%;
    padding: 0;
    margin: 0;
    float: left;
}

如果您想保持元素居中，只需应用负边距：

margin: 0 0 0 -4px;

从中心水平对齐div组

3 个答案: