將foreach結果排序爲2列

我試圖將foreach結果列表設置爲兩列，但是我不太確定如何在不拋出PHP的情況下如何去做。將foreach結果排序爲2列

目前，一切看起來象下面這樣： current layout

，我想它看起來如此： wanted layout

目前，我的foreach和CSS看起來這樣的：

<p class="title">Reviews</p> 
      <section id="reviews"> 
       <ul class="section_body"> 
        <?php 
         foreach($reviews['reviews'] as $rv){ 
          if ($rtmp++ < 10); 
          if ($rv['freshness'] == 'fresh') { 
           $image = "fresh"; 
          } 
          else { 
           $image = "rotten"; 
          } 

          echo '<img src="assets/images/' . $image . '.png" class="rating" title="Rotten" alt="Rotten" />'; 
          echo '<li>' . $rv['quote'] . '</li>'; 
         } 
        ?> 
       </ul> 
      </section>

Current CSS

預先感謝任何人o可以幫助！它會非常感激地收到。

來源

2012-12-08 Alex Ryans

你可以爲每個評論條目定義一個div，並指定它的某個常量寬度（它應該略小於總寬度的一半）並且有'float：left' –

給你的'#reviews li''樣式' display：inline-block;'然後50％的寬度應該能夠完成你所需要的。您可能還需要給他們一個固定的高度，以使其正確堆疊。 – primo

我通常使用的CSS做這種任務讓瀏覽器照顧的東西

#reviews li 
{ 
    float:left; 
    width: 45%; 
    ... 
}

的添加這些2號線到你的CSS，讓瀏覽器需要安排的照顧。這個想法是讓每個li拿走一半的容器（50％）。我做了45％的照顧微胖，邊緣和邊境

另外，你的報價和形象應該是在李

<li> <img src="..." /> <span>my quote here</span> </li>

來源

2012-12-08 16:08:12 codingbiz

請注意，如果某些元素明顯高於其他元素，這可能會產生堆疊問題。 – primo

這當然是真的。 OP也可能不得不迎合這一點給每一個特定的高度 – codingbiz

試試下面的代碼

<section id="reviews">     
<?php 
$i=0; 
foreach($reviews['reviews'] as $rv) 
{ 
    if($i++%2 == 0) 
    { 
     echo '<ul class="section_body">'; 
    } 
    if ($rtmp++ < 10); 
    if ($rv['freshness'] == 'fresh') { 
     $image = "fresh"; 
    } 
    else { 
     $image = "rotten"; 
    } 

    $img = '<div><img src="assets/images/' . $image . '.png" class="rating" title="Rotten" alt="Rotten" /></div>'; 
    echo '<li>' .$img . $rv['quote'] . '</li>'; 

    if($i%2 == 0 || $i== count($reviews['reviews'])) 
    { 
     echo '</ul>' 
    } 
} 
?> 
</section>

你應該把圖像和評論li元素內的文字。

來源

2012-12-08 16:12:52 kwelsan

將foreach結果排序爲2列

回答

相關問題