如果已達到最大高度，則渲染多個元素

我使用PHP動態渲染多個div元素。那些div元素在容器div中呈現，該容器div有max-height: 300px;這個容器div有width: 500px;，我在裏面渲染的div元素有width: 10px;。如果已達到最大高度，則渲染多個元素

目前，所有div都呈現在彼此之下，當它們達到300px的最大高度時，它們將被渲染到容器div元素的外部。相反，當第一列填充容器div時，這些元素應該在容器div的頂部開始一個新列。

來源

2014-02-27 user3041757

請附上您遇到麻煩一些特定的HTML代碼。提供相對而模糊的值的例子是沒有用的。 – TylerH

「我希望有人得到我，如果沒有，我會發佈一個關於這種情況的圖像。」不要只發布圖片，也不要發佈代碼... –

他們是否必須先排名第一才能移到下一列？或者它可以去1-2，然後3-4，然後5-6等？ –

嘗試display: inline-block;爲您的孩子div元素。

來源

2014-02-27 19:51:53 TylerH

那麼它不工作，這裏是一個屏幕， http://puu.sh/7qikQ.png 你看到的div，上面寫着：問X 問題X Qeustion X ... 仍然是containter外界渲染，我已經使用display：inline-block來查看包含該內容的所有div; – user3041757

使用PHP爲每列生成一個單獨的容器div，並將CSS規則display: inline-block添加到容器。

<div class="container"> 

<?php 

    $image_directory = '/path/to/your/images/'; 

    $images = array(
     $image_directory . 'image_1.jpg', 
     $image_directory . 'image_2.jpg', 
     $image_directory . 'image_3.jpg', 
     # and so on... 
    ); 

    $count = 1; 

    foreach($images as $image) { 

     if($count == 1) {  
      echo '<div class="image-column">'; 
     } 

     echo '<img src="' . $image . '">'; 

     if($count == 5) {  
      echo '</div>'; 
      $count = 1; 
     } 

     $count++; 
    } 
?> 

</div>

然後在你的CSS

.image-column { 
    display: inline-block; 
}

來源

2014-02-27 20:05:25 apostl3pol

這不是爲我想要的;我製作了一張圖片來展示你想要的東西，就像我在這張6號圖片中看到的那樣，因爲在5以下沒有更多的空間：http://puu.sh/7qjs9.png – user3041757

@ user3041757你必須使用PHP生成列。我已經編輯了我的答案，以表明你如何着手做這件事。當然，你必須事先知道圖像是什麼。 – apostl3pol

如果已達到最大高度，則渲染多個元素

回答

相關問題