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 と同じ「行」に大きな div がある場合、これは多くのスペースを無駄にします。また、div スタイリングに追加しようとしましfloat: leftたが、これにより、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;
}

jsフィドル

于 2013-04-28T21:48:40.867 に答える