1

我想以不同的 CSS 样式显示从数据库中抓取的每 4 行。数据库中的前三行应该采用 CSS 样式（col-4），但第四行应该采用 CSS 样式（最后是 col-4）：我如何使用 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; ?>
4

5 回答 5

4

:nth-child您可以使用CSS 选择器轻松完成此操作：

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

如果您不想为每4 行设置样式，而只想为第 4 行设置样式，请不要使用nin 4n：

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

浏览器兼容性一点也不差；支持除 IE < 9 之外的所有内容。

于 2013-06-19T11:43:51.983 回答
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 polyfill 脚本，例如Selectivizr，因为较旧的 IE 版本不支持它。Selectivizr 很好地解决了这个问题。

于 2013-06-19T11:44:19.257 回答
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; ?>
于 2013-06-19T11:44:24.847 回答
0 
<?php foreach($result as $i=>$value) : ?>
    <div class="col-4<? if ($i%4==3) echo ' last'; ?>">
于 2013-06-19T11:45:54.353 回答
0 
div:nth-child(4n)

在 css 中使用 nth-child 和乘法器

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

在这里也被问到：选择 CSS 中的每 N 个元素

于 2013-06-19T11:46:52.453 回答