다른 높이의 div를 플로팅하는 방법은 무엇입니까? 내가 무엇을 달성하고자하는

Question

:

내가 현재 무엇을 얻을

: (두 번째 상자가 전체 레이아웃을 망쳐 놨 여분의 목록 항목이 있습니다)

HTML :

<div id="categories"> 
    <div class="cat"> cat1 </div> 
    <div class="cat"> cat2 </div> 
    <div class="cat"> cat3 </div> 
    <div class="cat"> cat4 </div> 
    <div class="cat"> cat5 </div> 
    <div class="cat"> cat6 </div> 
    <div class="cat"> cat7 </div> 
    <div class="cat"> cat8 </div> 
    <div class="cat"> cat9 </div> 
    <div class="cat"> cat10 </div> 
</div> 

한 가지 해결책은 새 div에 5 개의 항목을 그룹화하고 clear:left을 적용하는 것입니다.하지만 PHP 코드가 어떻게 작동하는지는 알 수 없습니다.

Answer 1

나는이 많이 수행하고 지속적으로 다시이 참조에 와서 :

http://css-tricks.com/snippets/css/cross-browser-inline-block/

나는 이것이 당신이 계신 달성하는 데 도움이됩니다 생각합니다.

Answer 2

모든 div의 인라인 블록을 표시하지 않겠습니까?

Answer 3

바이올린 http://jsfiddle.net/c4urself/gCEDV/

HTML

<div id="categories"> 
    <div class="cat cat1 square"> cat1 </div> 
    <div class="cat cat2 square"> cat2 </div> 
    <div class="cat cat3 tall"> cat3 </div> 
    <div class="cat cat4 square"> cat4 </div> 
    <div class="cat cat5 long"> cat5 </div> 
    <div class="cat cat6 tall"> cat6 </div> 
    <div class="cat cat7 square"> cat7 </div> 
</div> 

CSS를 사용하면 왼쪽 맑은을 할 수없는 이유

body { 
    background-color: #ccc; 
} 
div.cat { 
    background-color: #fff; 
    float: left; 
    margin-left: 5px; 
    border: 1px solid green; 
    margin-bottom: 5px; 
} 
#categories { 
    width: 230px; 
} 
.square { 
    width: 50px; 
    height: 50px; 
} 
.long { 
    width: 100px; 
    height: 50px; 
} 
.tall { 
    height: 100px; 
    width: 50px; 
} 

Answer 4

정말 확실하지 않음으로 인해 어떻게 PHP 코드 공장.

<?php 
$i = 0; 
foreach ($cats as $cat) { 
    echo '<div class="cat"> cat '. $i .' </div>'; 
    if ($i%5 == 0) { 
    echo '<div style="clear: left;"></div>'; 
    } 
    $i++ 
} 
?> 

그렇지 않은 PHP 솔루션은 isotope 또는 masonry 될 것이다.

Answer 5

각 컨테이너의 높이에 어려움이있을 수 있습니다. 각 컨테이너의 높이는 내부에있는 것으로 설정됩니다. 이후에 각 div 컨테이너에 대해 DOM을 조작하기 위해 jQuery와 같은 요소로 요소를 잡을 수 있습니다. 높이가 중요하고 상자 내부에 내용이 충분하지 않으면 상자를 늘릴 수 없습니다.

수평 간격만큼이 요소들 각각은 동일한 패딩으로 CSS 클래스를 공유 할 수 있습니까?

각 컨테이너에 명시적인 너비가 있고 상위 컨테이너의 너비가 명시적인 경우 블록 5를 달성 할 수 있습니다.