1

データベースから取得した 4 行ごとに、異なる CSS スタイルで表示したいと考えています。DB の最初の 3 行は CSS スタイル (col-4) を使用する必要がありますが、4 行目は CSS スタイル (最後に col-4) を使用する必要があります。私のコードを以下に示します。

<?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 行目だけnをスタイルする場合は、 in を使用しないで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 以前をサポートする必要がある場合は、Selectivizrなどの CSS ポリフィル スクリプトを使用する必要があります。古い 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 に答える