0

我有许多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 占据“单元格”的顶部而不是底部。

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

4

2 回答 2

1

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

http://tinker.io/f834a

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

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

于 2013-04-28T21:54:55.080 回答
0

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

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

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

jsFiddle

于 2013-04-28T21:48:40.867 回答