Question

如何使用以下HTML代码在SilverStripe中水平排列$Title？

<div class="content-container unit size3of4 lastUnit">
    <article>
        <h1>$Title</h1>
        <% loop $Children %>
            <div class="item col-md-6">
                <h3>
                    <a href="$Link">$Title</a>
                </h3>
            </div>
        <% end_loop %>
    </article>

    $Form
    $CommentsForm
</div>

Answer 1

我们可以通过一些简单的CSS实现这一点。

我们在float: left div上使用.item来制作项目布局。

然后我们将width设置为25％（或者边距和宽度等于25％）。我们可以添加一些余量以确保项目之间有一些间距。

最后我们将一些css添加到article以清除浮动项目。我们这样做是为了使浮动项下面的任何内容都能正确显示。

<强> CSS

.content-container article .item {
    float: left;
    width: 22%;
    margin-right: 3%;
}
.content-container article:before,
.content-container article:after {
    content: " ";
    display: table;
}
.content-container article:after {
    clear: both;
}

<强> JSFiddle example

在SilverStripe中水平排列$ Title

1 个答案: