html - 内容 block 位置问题

Question

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

但是 float 不能正常工作。它以垂直线显示我的 block 。

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 %>

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

还有一个问题，在这种情况下我应该如何向内容添加特定大小？例如内容 block 只有 600px 水平和 300px 垂直。height: 400px; 和 width: 600px 在我的例子中没有正确地做这件事。对不起，菜鸟问题和糟糕的英语。

Answer 1

我没有测试过您的代码，但看起来您需要为每个 block 实例提供自己的 div 容器，例如:

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

附带说明一下，我还建议使用类似 BEM 的类命名约定，或 Bootstrap 使用的小写 BEM 样式。