javascript - 制作多列内联 block 容器以适应内容宽度

Question

我正在尝试创建一个固定高度的水平布局，其中包含 CSS 列的行内 block 元素。

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;
}

问题是内联 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

虽然它是一个内联 block 元素，但浏览器假定第二列会拉伸(stretch)视口(viewport)的宽度，尽管每列的宽度为 300 像素。

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