콘텐츠 블록 위치 문제

Question

내 SilverStripe에 콘텐츠 블록 모듈이 있습니다. 모두 잘 작동하지만 내 콘텐츠 블록 왼쪽 떠있는 디자인이 필요합니다. 이 일을하고 싶습니다 ->w3schools

하지만 float가 제대로 작동하지 않습니다. 내 블록을 수직선으로 표시합니다.

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과 같은 클래스 명명 규칙 또는 부트 스트랩에서 사용하는 소문자 BEM 스타일.