PHP的X後Div divs和開始新的一個X div div後012 div div

我想用php循環建立一個不對稱的網格。PHP的X後Div divs和開始新的一個X div div後012 div div

我已成功地做到這一點：

<?php 
$arr = array("blue", "yellow", "red", "pink", "green", "cyan", "gold", "orange", "magenta","blue", "yellow", "red", "pink", "green", "cyan", "gold", "orange", "magenta","blue", "yellow", "red", "pink", "green", "cyan", "gold", "orange", "magenta"); 

$i = 0; 
foreach ($arr as $val) { 

    if($i <= 4) { 
     if($i%2 == 0) { 
      if($i != 0) { 
       echo "</div>"; 
      } 
      echo '<div class="container" style="margin:20 10px;border:1px solid;">'; 
     } 
    } 
    if($i%7 == 0) { 
     if($i != 0) { 
      echo "</div>"; 
      echo '<div class="container" style="margin:20 10px;border:1px solid;">'; 
     } 
    } 
    ?> 
    <div class="holder" style="font-family:helvetica;font-weight:bold;padding:5px;background-color:<?php echo $val; ?>;"> 
     <?php echo $i." - ".$val;?> 
    </div> 
<?php 
$i++; 
} 
?> 
</div>

這就是我想做的事：

<div class="container"> 
<div class="holder"> 0 - blue </div> 
<div class="holder"> 1 - yellow </div> 
</div> 
<div class="container"> 
<div class="holder"> 2 - red </div> 
<div class="holder"> 3 - pink </div> 
</div> 
<div class="container"> 
<div class="holder"> 4 - green </div> 
<div class="holder"> 5 - cyan </div> 
<div class="holder"> 6 - gold </div> 
</div> 
<div class="container"> 
<div class="holder"> 0 - blue </div> 
<div class="holder"> 1 - yellow </div> 
</div> 
<div class="container"> 
<div class="holder"> 2 - red </div> 
<div class="holder"> 3 - pink </div> 
</div> 
<div class="container"> 
<div class="holder"> 4 - green </div> 
<div class="holder"> 5 - cyan </div> 
<div class="holder"> 6 - gold </div> 
</div> 
<div class="container"> 
<div class="holder"> 0 - blue </div> 
<div class="holder"> 1 - yellow </div> 
</div> 
<div class="container"> 
<div class="holder"> 2 - red </div> 
<div class="holder"> 3 - pink </div> 
</div> 
<div class="container"> 
<div class="holder"> 4 - green </div> 
<div class="holder"> 5 - cyan </div> 
<div class="holder"> 6 - gold </div> 
</div>

UPDATE：http://phpfiddle.org/main/code/ke2-ku8 這是我的網頁，現在，在頂部的三個塊對，我希望我的模板具有這種結構。但是我無法找到一種方法來處理我用循環生成的每個div。

任何建議都會很棒！

感謝

來源

2013-12-11 user3092730

究竟是你想怎麼辦，哪裏的均流代碼失敗嗎？ – kero

我建議你使用類和兒童選擇器。看來你正試圖讓你的CSS根據輸出的div進行更改。這將使您的代碼更清潔，更易於管理。我建議你放棄使用style屬性。 –

這是一個例子......當然我使用類 – user3092730

試試這個：

<?php // Fun testing array 
$arr = array("blue", "yellow", "red", "pink", "green", "cyan", "gold", "orange", "magenta","blue", "yellow", "red", "pink", "green", "cyan", "gold", "orange", "magenta","blue", "yellow", "red", "pink", "green", "cyan", "gold", "orange", "magenta"); 

// Here's where we control the breaks 
$breakpoints = array(0,2,4); 
// Highest number of rows/items 
$max_point = 7; 

// Loop through all items 
foreach ($arr as $i=>$val) { 
    // Track breaks 
    $calc = $i% $max_point; 
    // Check for a breakpoint to make things happen 
    if(in_array($calc,$breakpoints)) { 
     // Is this a virgin? 
     if ($i > 0) echo "</div>"; 
     // Output a new container 
     echo '<div class="container" style="margin:20px 10px;border:1px solid;">'."\n\r"; 
    } ?> 
    <div class="holder" style="font-family:helvetica;font-weight:bold;padding:5px;background-color:<?php echo $val; ?>;"><?php echo $i." - ".$val; $i++; ?></div> 
<?php } ?>

來源

2013-12-11 20:48:51

謝謝！它完美的工作！ – user3092730

PHP的X後Div divs和開始新的一個X div div後012 div div

回答

相關問題