1
我正在嘗試使一列類似於砌體的圖塊不需要實際加載另一個JS插件。我想是我可以做的最後一招。我現在的問題是，如果div容器很長，那麼div容器在我的列容器中就會被打包。css divs換行
看到我的小提琴：
注意藍瓦跨列跨越。有什麼辦法可以強迫它留在同一列嗎？
HTML
<form id="member-form" class="form-standard" action="" method="post">
<div id="Misc" class="tile-columns">
<div class="tile">
<h2 class="tile-title">Notes</h2>
<textarea id="Notes" name="Notes"></textarea>
</div>
<div class="tile" style="background: #5fe;">
<h2 class="tile-title">Info</h2>
<div class="field-section">
<label for="SecQuestion1">Question 1</label>
<textarea id="SecQuestion1" name="SecQuestion1"></textarea>
<label for="SecQuestion1Answer">Answer</label>
<input id="SecQuestion1Answer" name="SecQuestion1Answer" type="text" value="">
</div>
<div class="field-section">
<label for="SecQuestion2">Question 2</label>
<textarea id="SecQuestion2" name="SecQuestion2"></textarea>
<label for="SecQuestion2Answer">Answer</label>
<input id="SecQuestion2Answer" name="SecQuestion2Answer" type="text" value="">
</div>
</div>
<div class="tile">
<h2 class="tile-title">Reference</h2>
<textarea id="Reference" name="Reference"></textarea>
</div>
<div class="tile">
<h2 class="tile-title">Another Tile</h2>
<p>More Content Here</p>
</div>
</div>
<!-- end columns -->
</form>
CSS
body {
background: #ddd;
padding: 10px;
font-family:"roboto condensed";
font-size: 12px;
}
h2.tile-title {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
.tile {
background: #ffffff;
}
.tile, .tile-notice {
margin-bottom: 2px;
vertical-align: top;
}
.tile-columns {
-moz-column-count: 2;
-moz-column-gap: 1;
-webkit-column-count: 2;
-webkit-column-gap: 1;
column-count: 2;
column-gap: 1;
width: 689px;
}
.tile-columns .tile {
width: 323px;
height: 100%;
padding: 10px;
}
.form-standard .field-section {
display:inline-block;
margin-bottom: 10px;
vertical-align: top;
}
.form-standard label, .form-standard input, .form-standard textarea {
display: block;
}
.form-standard input {
border: 1px solid #ddd;
padding: 5px;
}
.form-standard textarea {
width: 300px;
height: 100px;
padding: 10px;
border: 1px solid #ddd;
}