こんにちは、s の行レイアウトを作成しようとしていますdiv。
div行ごとの の既知の数が不明です。1かもしれませんが25かもしれません。
テーブル レイアウトを使用したdisplay: table;のは、行のすべての 'div' のサイズを知らずdiv、ページが縮小したときに s をラップせずに同じサイズを取得する唯一の方法と思われるためです。
どうすればこれと同じことを行うことができますが、divs の高さも動的にすることができます。
テーブルを使用したり、テーブル内のテーブルを使用してこのような問題を修正したりする古いレイアウト手法を回避しようとしています。
jdFiddle の例を次に示します。ご覧のとおり、行 2 列 1 には余分な行がありますが、その行のすべてのセルがそれに一致するように成長しています。
http://jsfiddle.net/djlerman/G9dQ/2/
CSS:
#row {
display: table;
table-layout: fixed;
width: 95%;
margin: 0 auto;
}
#row div {
display: table-cell;
}
.column {
border: 1px solid;
-moz-border-radius: 15px;
border-radius: 15px;
border-color: grey;
box-shadow: grey 1em 1em 1em
-webkit-gradient: grey 1em 1em 1em
-moz-linear-gradient: grey 1em 1em 1em
margin: 0 auto;
padding: 5px;
text-align: center;
}
HTML:
<div id="row">
<div class="column">
Column 1
</div>
<div class="column">
Column 2
</div>
</div>
<div id="row">
<div class="column">
Column 1
<br />Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5<br />Line 6<br />Line 7<br />
</div>
<div class="column">
Column 2
</div>
<div class="column">
Column 3
</div>
<div class="column">
Column 4
</div>
<div class="column">
Column 5
</div>
<div class="column">
Column 6
</div>
<div class="column">
Column 7
</div>
<div class="column">
Column 8
</div>
</div>
<div id="row">
<div class="column">
Column 1
</div>
<div class="column">
Column 2
</div>
<div class="column">
Column 3
</div>
</div>
ありがとう、
〜ドナヴォン
+---------------------------------------------------------------- ------------------+
私が考えたことに答えようとしましたが、投稿して答えることはできません。だからここにある...
ジーゼ。この「div」は非常に複雑です。:-(
これが私が思いついたものです。私が得た応答とたくさんのグーグルに感謝します。
それが他の人を助けることを願っています：
http://jsfiddle.net/djlerman/G9dQ/5/
CSS:
.row {
display: table;
table-layout: fixed;
width: 95%;
margin: 0 auto;
}
.row div {
display: table-cell;
}
.column {
border: 0px;
margin: 0 auto;
padding: 0px;
text-align: center;
overflow: auto;
vertical-align: top;
}
.border {
padding: 5px;
border: 1px solid;
-moz-border-radius: 15px;
border-radius: 15px;
border-color: grey;
border-color: grey;
box-shadow: grey .25em .25em .25em;
-webkit-gradient: grey .25em .25em .25em;
-moz-linear-gradient: grey .25em .25em .25em;
vertical-align: top;
text-align: center;
overflow: auto;
margin: 0 auto;
width: 1000px;
max-width: 1000px;
}
.columnSpace {
width: 10px;
}
.rowSpace {
height: 10px;
}
HTML:
<div class="row">
<div class="column">
<div class="border">Column 1</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 2</div>
</div>
</div>
<div class="rowSpace"></div>
<div class="row">
<div class="column">
<div class="border">Column 1
<br />Line 1
<br />Line 2
<br />Line 3
<br />Line 4
<br />Line 5
<br />Line 6
<br />Line 7
<br />
</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 2</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 3</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 4</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 5</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 6</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 7</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 8</div>
</div>
</div>
<div class="rowSpace"></div>
<div class="row">
<div class="column">
<div class="border">Column 1</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 2
<br />Line 1
<br />Line 2
<br />Line 3</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 3</div>
</div>
</div>