Question

我的SilverStripe中有一个内容块模块。一切正常，但我需要设计我的内容块向左浮动。我想做这样的事情 - ＆gt; 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样式。

内容阻止位置问题

1 个答案: