浏览器支持

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 to a percentage width的宽度值怎么办？我所有的宽度都很小。它们仍然显然是相对于某些东西，因为收缩和增长百分比按比例改变宽度但我不知道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中失败。

你需要在内部标签中设置vertical-align：top，以便按照你期望的方式工作（否则一切都像vertical-align：bottom）。

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 }

以上列考虑了边距和填充but here's a fiddle that lays it out.

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]。但是，专栏框不会为具有'位置的元素建立包含块：固定'或'位置：绝对'。

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

3 个答案:

浏览器支持