Question

我试图创建一个固定高度的水平布局，其中包含CSS列的内联块元素。

article {
  -webkit-column-width: 200px;
  -moz-column-width: 200px;
  column-width: 200px;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
  -moz-column-fill: auto;
  column-fill: auto;
  height: 350px;
  display: inline-block;
}

问题在于内联块元素的宽度设置不正确（列占用的空间比容器提供的空间少） - 似乎宽度对应于内容转换为列之前的内容（在Chrome中 - 在结果容器中彼此叠加）或适合单列（在Firefox和IE中 - 在结果容器中重叠）。

示例（检查文章元素的宽度）： http://codepen.io/anon/pen/yNQdVE

我想出的唯一解决方案是使容器适合单列并使用JS将宽度设置为滚动宽度。似乎在我测试的所有3个浏览器中都能正常工作。

实施例： http://codepen.io/anon/pen/gpQNWg

这个问题有没有纯CSS解决方案？

Answer 1

将显示从inline-block更改为table-cell似乎可以为您提供所需的结果。

在这支钢笔中看到的是，这种风格与边框一起应用于视觉辅助。

http://codepen.io/TheLarkInn/pen/jPQjzK

虽然它是一个内联块元素，但是浏览器假设第二列拉伸了视口的宽度，尽管每列的宽度为300px。

您还可以使用display: flex;将所有文章包装在元素中。

制作多列内联块容器以适应内容宽度

1 个答案: