css div 跨列换行答案

【问题标题】：css divs wrap across columnscss div 跨列换行
【发布时间】：2021-09-29 02:17:55
【问题描述】：

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

【问题讨论】：

标签： css css-multicolumn-layout

【解决方案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

【讨论】：