每4行更改一次css

时间:2013-06-19 11:41:25

标签: php css

我希望以不同的CSS样式显示从数据库中抓取的每第4行。 DB的前三行应采用CSS样式(col-4),但第四行应采用CSS样式(col-4 last):如何使用PHP执行此操作。我的代码如下所示。

<?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; ?> 

5 个答案:

答案 0 :(得分:4)

您可以使用: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之外的一切&lt;支持9。

答案 1 :(得分:1)

您根本不需要使用PHP; CSS自行提供此功能。

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

或者,如果第4个元素是集合中的最后一个元素(正如您在问题中暗示的那样),则可以使用col-4:last-child { ... }代替。

浏览器兼容性说明:如果您需要使用这些选择器支持IE8或更早版本,则需要使用CSS填充脚本,例如Selectivizr,因为较旧的IE版本不支持它。 Selectivizr很好地处理了这个问题。

答案 2 :(得分:1)

只需计算您输出的行数并使用模数来检查它是否是第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; ?> 

答案 3 :(得分:0)

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

答案 4 :(得分:0)

div:nth-child(4n) 

在css中使用带有乘数的nth-child

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

此处也被问到:Select every Nth element in CSS