html - 动态交替右左对齐

Question

假设我正在使用 PHP 按时间顺序从 MySQL 数据库中的多个帖子中提取文本。我希望我的帖子显示为左右交替排列。

重要的是，我希望帖子能够被删除。如果一个帖子被删除，我希望其他帖子保持动态交替对齐。

你能给我一些关于如何使用 CSS 做到这一点的想法吗？

Answer 1

使用:odd和:even伪类（在较新的浏览器上）

例如

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

如果要在删除帖子后保留之前的顺序，只需display: none在删除帖子时设置（而不是从 DOM 中删除节点）

如果您想重新定位所有后续帖子，只需完全删除该节点

Answer 2

从 db 收到结果后，将类名放入 php 变量中。在 foreach 循环中，在循环运行时在两个类名之间来回切换。像这样：

//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;
}