Question

我有一些固定宽度和可变高度的display: inline-block div元素。

我想打印每个div而不浪费纸张。我将div连接起来制作一个单独的HTML文档然后打印出来。带有空div的示例文档：

<!DOCTYPE html>
<meta charset="utf-8">
<title>Test page</title>
<style type="text/css">
div{
display:inline-block;
width: 13cm;
background-color: #999;
margin: 1mm;
}
</style>

<div style="height:10cm"></div>
<div style="height:20cm"></div>
<div style="height:14cm"></div>
<div style="height:20cm"></div>
<div style="height:15cm"></div>
<div style="height:30cm"></div>
<div style="height:20cm"></div>
<div style="height:27cm"></div>

结果令人不满意。 Firefox将div放在一个表格中，每个div都占据了“单元格”的底部。如果我在同一个“行”上有一个较大的div作为较小的一个，这会浪费很多空间。我也尝试将float: left添加到div样式中，但这只会使div占据“单元格”的顶部而不是底部。

解决这个问题的最简单方法是什么？

Answer 1

由于您的所有元素都具有相同的宽度，因此您可以使用columns属性。但是，元素将从上到下排列，而不是从左到右排列：

http://tinker.io/f834a

body { /* or whatever is containing your elements */
    columns: 13cm; /* width of your elements */
}

可能需要前缀。 http://caniuse.com/#feat=multicolumn

Answer 2

你可以做这样的事情，如果你只用2列就可以了，它会很好：

div:nth-child(odd)
{
  float: left;
  clear: left;
}

div:nth-child(even)
{
  float: right;
  clear: right;
}

jsFiddle

包显示：内联块div

2 个答案: