Расположите $Title по горизонтали в SilverStripe

Question

Как мне организовать $Title горизонтально в SilverStripe с помощью следующего HTML-кода?

<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 на .item div, чтобы расположить элементы рядом.

Затем мы установили 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