内容块位置问题

Question

我的 SilverStripe 中有一个内容块模块。一切正常，但我需要设计我的内容块向左浮动。我想做这样的事情 -> w3schools

但是浮动不能正常工作。它以垂直线显示我的块。

css：

.BoxPage { 

    float: left;

        }
.BoxPage5   { 

    height: 400px; 
    width: 600px;
    line-height: 2.0em;
                    }

BoxPage html

<div class="BoxPage5">
    <% loop $Blocks %> <- this loop blocks
    $HTML <- this insert block content (images, title, link) 
<% end_loop %>
</div>

IamgeBlock html：

<% loop $Images.Sort('SortOrder') %> <- This loop images
<a href="$Top.WebsiteLinkHyper"> <- This add a href link
<div class="BoxPage3"> <- This is for opacity effect. 
<figure>
<h2>$Title</h2> 
    $Tag  
</figure>
</div>
</a>
<% end_loop %>

我知道我做错了，但我到底做错了什么？

还有一个问题，在这种情况下我应该如何为内容添加特定大小？例如内容块只有 600px 水平和 300px 垂直。 height: 400px; 和 width: 600px 在我的情况下没有正确地做这件事。 抱歉新手问题和糟糕的英语语言。

Answer 1

我还没有测试你的代码，但看起来你需要为每个块实例提供自己的 div 容器，例如：

<div class="BoxPage5">
    <% loop $Blocks %>
        <div class="BoxPage">$HTML</div>
    <% end_loop %>
</div>

另外，我还建议使用 BEM 之类的类命名约定，或 Bootstrap 使用的小写 BEM 样式。