3

我不确定我是否理解 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% 对应的是什么。

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

4

3 回答 3

2

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

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

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

（强调我的。）

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

浏览器支持

正如我在评论中指出的那样，今天对列数等的支持很差。除了你真的需要 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 一样）。

于 2013-11-08T22:48:27.903 回答
1

从本质上讲，列布局的工作方式是您拥有一个具有一定宽度的容器，然后将该容器拆分为列。当您决定设计需要多少列时，您为这些列中的每一列分配一个百分比。然后，您将这些列彼此相邻浮动。

因此，如果您有 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 }

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

于 2013-11-08T22:47:09.547 回答
1

内容列中的父元素宽度是指列宽，该属性默认为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]，列框的行为类似于块级框、表格单元格和内联块框。但是，列框不会为具有“位置：固定”或“位置：绝对”的元素建立包含块。

于 2013-11-08T22:49:32.593 回答