html - 動的オルタナ右翼

Question

PHPを使用してMySQLデータベースの複数の投稿から時系列でテキストを取得しているとしましょう。投稿を左右に交互に並べて表示したい。

重要なのは、投稿を削除できるようにすることです。投稿が削除された場合、他の投稿に動的な交互の配置を保持させたいです。

CSSを使用してこれを行う方法についていくつかアイデアを教えてください。

Answer 1

dbから結果を受け取ったら、クラス名をphp変数に入れます。foreachループでは、ループの実行中に2つのクラス名を切り替えます。そのようです：

//php file 
$alt = 'Row';

foreach($results as $row) {
    echo '<div class="' . $alt . '">some content</div>';
    $alt = ($alt == 'Row') ? 'altRow' : 'Row';
}

次に、スタイルシートで：

.Row {
    text-align: left;
}

.altRow { 
    text-align: right;
}

Answer 2

Use :oddand :evenpseudoClasses（新しいブラウザの場合）

例えば

div:nth-child(odd) { text-align: left }
div:nth-child(even) { text-align: right }

投稿の削除後に以前の順序を保持する場合はdisplay: none、（DOMからノードを削除するのではなく）投稿を削除するときに設定するだけです。

代わりに動的に再配置したい場合は、後続のすべての投稿でノードを完全に削除してください