1

我正在尝试制作一列类似于砖石的瓷砖，而实际上不必加载另一个 JS 插件。我想作为最后的手段我可以。我现在的问题是，如果我的列容器内的 div 很长，它们就会被包裹起来。

看我的小提琴：

http://jsfiddle.net/dLM6A/3/

请注意，蓝色图块跨越列。有什么方法可以强制它保持在同一列中吗？

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;
}
4

1 回答 1

1

为了强制内容保留在同一列中（而不是跨列中断），我在您的.tile课程中添加了以下几行（如果您愿意，可以将它们添加到其他地方）：

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

这在 Chromium 和 Firefox 中有效（我没有要测试的 IE，但它应该可以回到 IE 10）。您可以在更新的小提琴中看到结果：http: //jsfiddle.net/dLM6A/11/

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

于 2014-07-20T03:46:20.160 回答