2
您好，我正在嘗試創建div s的行佈局。HTML CSS一個容器中的DIV動態數量，每個div的動態高度
未知的每行編號div。可能是1可能是25
我用了一個表格佈局display: table;，因爲它似乎是得到有關該行的所有「div的大小相等的唯一途徑，而不需要知道它們的大小和沒有包裝的div■當的頁面縮小。
我該怎麼做同樣的事情，但div的高度也是動態的。
我想避免使用表和使用表中的表來解決這樣的事情的舊佈局技術。
這裏是jdFiddle中的一個例子。正如你可以看到的第2行第1列有多餘的行，但該行上的每個單元格都已增長以匹配它。
http://jsfiddle.net/djlerman/G9dgQ/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>
感謝，
〜Donavon
+ ------------ -------------------------------------------------- ----- +
試圖給出我想的答案，但它不會讓我發佈和回答。所以這裏是...
Jeeze。這個'div'的東西非常複雜。 :-(
這裏是我想出了感謝的答覆我和googleing的地段
希望它可以幫助別人：。
http://jsfiddle.net/djlerman/G9dgQ/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>
應該row2在row2 float undenith column2？ （id =「row」應該是class =「row」，因爲你不止一次需要它） – caramba 2013-03-11 18:39:10
這是一個很好的觀點。 所以在樣式部分#row將改爲.row 會#row的div {}改爲.row DIV {}？這些如何與班級一起工作？ – 2013-03-11 19:03:09
只是喜歡，你也可以寫.row .COLUMN {}，因爲如果你寫.row的div {XX}在行內每格獲得XX風格 – caramba 2013-03-11 19:17:34