內容塊位置問題

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 horizo​​ntaly和300px verticaly。 height: 400px;和width: 600px在我的情況下沒有正確地做這件事。 對不起noob問題和糟糕的英語語言。

Answer 1

我沒有測試你的代碼，但它看起來像你需要給每個塊實例其自身的div容器，如：

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

在一個側面說明，我也建議使用類命名約定，如BEM，或Bootstrap使用的小寫BEM樣式。