Css列布局 - 内联块元素，相对于宽度的百分比是多少

Question

我不确定我是否理解css列布局应该如何工作。

我有一个简单的 html

  <div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>

和 CSS

.block {
  background-color: blue;
  width: 50em;
  height: 10px;
  margin: 2px;
  display: inline-block;
}
.container {
  border: 1px solid black;
  display: inline-block;
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}

这按预期工作，元素向动，然后进入第二列。

现在，如果我将 .block 的宽度值更改为百分比宽度怎么办？我所有的宽度都很小。它们仍然明显相对于某些东西，因为缩小和增加百分比会按比例改变宽度，但我不知道 100% 对应于什么。

相对于百分比宽度是多少？

Answer 1

宽度相对于浏览器插入的列伪元素：

http://www.w3.org/TR/css3-multicol/

在传统的CSS盒子模型中，一个元素的内容被流入对应元素的内容框中。多列布局在内容框和内容之间引入了一种新的容器类型，即列框（或简称列）。multicol 元素的内容将流入其列框中。

（强调我的。

因此，您要求的百分比宽度是相对于隐式列框的。

浏览器支持

正如我在评论中指出的那样，今天对列计数等的支持很差。除了你真的需要CSS多列的特定功能，我发现使用旧的内联块方法更容易。适用于当今使用的所有浏览器，很容易弄清楚。

http://jsfiddle.net/b9chris/nt83M/

.block {
  background-color: blue;
  width: 45%;
  height: 10px;
  margin: 2px;
  display: inline-block;
  vertical-align: top;
}
.container {
  border: 1px solid black;
  width: 200px;
  display: inline-block;
}
<span class=container>
<span class=block></span>
<span class=block></span>
<span class=block></span>
<span class=block></span>
<span class=block></span>
</span>

两个重要的警告：

为了使旧的IE支持正常工作，您需要使用默认情况下内联的标签，例如span。使用默认阻止的标签，如div，在Chrome等中看起来很棒，但在IE8中失败。

您需要在内部标签中设置垂直对齐：顶部，以使事情按照您期望的方式工作（否则一切都像垂直对齐：底部）。

Answer 2

从本质上讲，列布局的工作方式是你有一个宽度的容器，你将这个容器分成列。当您决定设计需要多少列时，您可以为每个列分配一个百分比。然后，将这些列并排放置。

因此，如果您有 12 列布局，则列类将如下所示：

.col-1 { width: 4.8076923077% }
.col-2 { width: 13.4615384615% }
.col-3 { width: 22.1153846154% }
.col-4 { width: 30.7692307692% }
.col-5 { width: 39.4230769231% }
.col-6 { width: 48.0769230769% }
.col-7 { width: 56.7307692308% }
.col-8 { width: 65.3846153846% }
.col-9 { width: 74.0384615385% }
.col-10 { width: 82.6923076923% }
.col-11 { width: 91.3461538462% }
.col-12 { width: 100%; margin: 0 }

上面的列考虑了边距和填充，但这里有一个小提琴来布置它。

Answer 3

内容列中的父元素宽度是指列宽，该属性默认为 auto 。列式元素由 column-width 或 column-count 定义（但不能同时定义两者，如果它们都是非自动的，column-count覆盖任何column-width值）。因此，在您的示例中，提供column-count会导致自动生成的宽度显示为容器宽度。

来源 - 就在示例 IX 上方：http://www.w3.org/TR/2011/CR-css3-multicol-20110412/

列框充当其内容的包含块。那是 列框的行为类似于块级、表格单元格和内联块 框，根据 CSS 2.1 第 10.1 节第 2 项 [CSS21]。但是，列 框不为具有"位置： 固定"或"位置：绝对"。