0

嗨，我想知道是否有人可以提供帮助，不完全确定这是可能的，但我有一个名为的 div 容器<div class="scroll">

在 div scroll 内部是一个 sql 查询，它与数据库中用户发布的评论相呼应。div滚动设置为600px的宽度，所以评论会从左到右排列在这个div中，每行有两个评论框，每个评论框都在300px以下，以便彼此对齐。

评论如下所示：

<div class="scroll">

comment 1 | comment 2
comment 3 | comment 4
comment 5 | comment 6
</div>

评论包含在 div "comment_box" 中

现在我所做的是将背景图像放入 div “comment_box” 这个图像是一个指向左侧并位于 div 左侧的指针箭头，但我也想要第二个背景图像右侧对齐的注释框，因此在这种情况下，注释 2、4 和 6 将具有不同的背景图像/指向 div 右侧右侧的箭头。

这可能吗？

谢谢

comment box{

.wall_post_case_branch {
    background-image:url(../img/effects/arrow_left.png);
    background-repeat:no-repeat;
    background-position: center;
    height:90px;
    width:290px;
    position:relative;
        border:#ccc 1px solid;


}

mysql:

<?php
    if(mysql_num_rows($wallposts_set) > 0) {
        while ($posts = mysql_fetch_array($wallposts_set)) {
            $age = days_from_date($posts['date_added']);
            ?>
            <div class="comment_box">
             <?php echo "{$posts['content']}"; ?>
             </div>
4

3 回答 3

1

您可以按如下方式进行。

<?php
    $i = 0;
    while ($posts = mysql_fetch_array($wallposts_set))
    {
        $class = ' odd';
        if ($i++ % 2 == 0)
        {
            $class = ' even';
        }
        echo '<div class="comment_box'.$class.'">';
    }
?>

并且在css

.odd { background-image:imageone.jpg; }
.even{ background-image:imagesecond.jpg; }
于 2013-04-25T11:30:23.030 回答
0

您也可以使用 CSS 简单地执行此操作：

:nth-child(even)
:nth-child(odd)

小提琴用背景颜色而不是图像来说明。

http://jsfiddle.net/ingvi/CFMcA/

希望能帮助到你

于 2013-04-25T12:54:17.740 回答
0

我会在 while 循环之前生成变量$i = 0;。

它将使用它来定义它应该使用的背景颜色。

然后在while循环中我会使用这个代码：

while ($posts = mysql_fetch_array($wallposts_set)) {
    $i++;
    $age = days_from_date($posts['date_added']);
    echo "<div class=\"comment_box_$i\">
    $posts['content']}
    </div>";
    if ($i == 2)
        $i = 0;
}

然后这些盒子将有 2 个不同的类别，左边的一个将有，class="comment_box_1"而右边的盒子将有class="comment_box_2".

然后，您可以为差异框创建 CSS。

享受

于 2013-04-25T11:30:22.457 回答