每4行更改一次css

我想顯示每個從數據庫中抓取的第4行不同的CSS樣式。數據庫的前三行應採用CSS樣式（col-4），但第四行應採用CSS樣式（col-4 last）：我如何使用PHP進行此操作。我的代碼顯示如下。每4行更改一次css

<?php foreach($result as $value) : ?> 
    <div class="col-4"> 
     <a href="view.php?m_id=<?php echo $value['m_id']; ?>"> 
      <img alt="" src="<?php echo $value['m_image']; ?>" width="131px" height="120px"> 
     </a> 
     <h3><a href="view.php?m_id=<?php echo $value['m_id']; ?>"><?php echo $value['m_title']; ?></a></h3> 
     <p><strong><?php echo $value['name']; ?></strong> </p> 
     <p><?php echo date('M j, g:i A', strtotime($value['date'])); ?></p> 
    </div> 
<?php endforeach; ?>

來源

2013-06-19 billys

可能的重複？ http://stackoverflow.com/questions/15650337/how-to-use-modulus-with-php-to-add-a-css-class-to-a-grid-of-images-depending-on –

您可以輕鬆地與:nth-child CSS選擇器做到這一點：

.col-4:nth-child(4n) { 
    /* styles for every 4th row */ 
}

如果你不想風格每第4行，而是只第4行，不使用n在4n：

.col-4:nth-child(4) { ... }

Browser compatibility一點也不差;除了IE < 9之外的所有內容都受支持。

來源

2013-06-19 11:43:51 Jon

*一切當然，IE <9 *除外。更糟的是，我總是說。 '$更糟= IE;'大聲笑（** + 1 **）;-) –

根本不需要使用PHP; CSS自己提供了這個功能。

.col-4 { 
    ..... your standard css for the columns ...... 
} 
.col-4:nth-child(4) { 
    ..... your special css for the 4th column 
}

或者，如果第四元素是集合中的最後一個（如您的問題暗示），你可以使用col-4:last-child { ... }來代替。

瀏覽器兼容性說明：如果您需要使用這些選擇器支持IE8或更早版本，則需要使用CSS填充腳本，例如Selectivizr，因爲較早的IE版本不支持它。 Selectivizr很好地處理了這個問題。

來源

2013-06-19 11:44:19 Spudley

簡單地計算你有多少行輸出，並使用模數來檢查它是否是一個第4行：

$index = 0; 
<?php foreach($result as $value) : ?> 
    <div class="col-4<?php if (++$index % 4 == 0): ?> last<?php endif; ?>"> 
     <a href="view.php?m_id=<?php echo $value['m_id']; ?>"> 
      <img alt="" src="<?php echo $value['m_image']; ?>" width="131px" height="120px"> 
     </a> 
     <h3><a href="view.php?m_id=<?php echo $value['m_id']; ?>"><?php echo $value['m_title']; ?></a></h3> 
     <p><strong><?php echo $value['name']; ?></strong> </p> 
     <p><?php echo date('M j, g:i A', strtotime($value['date'])); ?></p> 
    </div> 
<?php endforeach; ?>

來源

2013-06-19 11:44:24 TimWolla

<?php foreach($result as $i=>$value) : ?> 
    <div class="col-4<? if ($i%4==3) echo ' last'; ?>">

來源

2013-06-19 11:45:54 Imperative

div:nth-child(4n)

使用第n個孩子與乘數在CSS

http://css-tricks.com/how-nth-child-works/

在此處詢問：Select every Nth element in CSS

來源

2013-06-19 11:46:52 abimelex

每4行更改一次css

回答

相關問題