Question

我正在尝试制作一个类似于砌体的瓷砖列，而不必实际加载另一个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;
}

Answer 1

要强制内容保留在同一列中（不要突破列），我将以下行添加到.tile类中（如果需要，可以将其添加到其他位置）：

break-inside: avoid-column;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;

这适用于Chromium和Firefox（我没有IE测试，但是it should work back to IE 10）。您可以在更新的小提琴中看到结果：http://jsfiddle.net/dLM6A/11/

您可以在此处阅读page-break-inside属性：http://www.w3schools.com/cssref/pr_print_pagebi.asp

css divs跨列包装

1 个答案: