実際に別の JS プラグインをロードすることなく、石積みに似たタイルの列を作成しようとしています。最後の手段として、できると思います。現在の私の問題は、列コンテナー内の div が長い場合にラップされることです。
私のフィドルを参照してください：
青いタイルが列全体にまたがっていることに注意してください。強制的に同じ列に残す方法はありますか?
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;
}