Как сделать комментарии, размещенные на моем сайте, отформатированными так, чтобы они были отделены друг от друга?

Question

Я работаю над кодом для моего блога, который отображает комментарии. Это код, который выводит комментарии из базы данных:

$i = 0;
while ($i < $num) {
$name = mysql_result($result,$num - $i,"name");
$dream = mysql_result($result,$num - $i,"dream");


echo "$name<br>$dream<br>";

$i++;
}

В настоящее время я использую CSS, чтобы применить стиль ко всему div, в котором находится этот бит php. Это позволяет мне форматировать все опубликованные комментарии, но я хочу отформатировать каждый комментарий индивидуально, хотя и единообразно. Например, я могу использовать CSS, чтобы поместить рамку вокруг всех комментариев, но мне нужна одна и та же граница вокруг каждого комментария для разделения комментариев. Есть идеи? Помощь приветствуется.

Answer 1

Поместите каждый комментарий в div

echo "<div class='comment'>$name<br>$dream</div>";

или, семантически лучше, обернуть все в <ul> и каждый комментарий должен быть <li>:

echo "<li>$name<br>$dream</li>";

и адрес каждого li примерно так:

ul.comments li { border: ..... }

Answer 2

В качестве предложения, вы могли бы разделить комментарии по полосам зебры вместо того, чтобы помещать рамку вокруг каждого из них. Ваш PHP должен будет добавить условное выражение, используя модуль (2), чтобы добавить класс css четный / нечетный. И ваш CSS будет выглядеть так:

ul.comments li.even {
    background-color:white;
}

ul.comments li.odd {
    background-color:lightBlue;
}

Answer 3

Просто используйте div и классы.

Например, выведите что-то вроде:

<div class="comment">
  <div class="author">John</div>
  <div class="commentBody">This is a comment!</div>
</div>

Таким образом, вы можете отдельно стилизовать весь комментарий (класс comment), авторимя (класс author) и сам комментарий (класс commentBody)

Вы также можете использовать <li> вместо <div> s.

Answer 4

echo '<div class="comment">' . "$name<br/>$dream<br/></div>";

Тогда в вашем CSS вы можете использовать

.comment {
    /* CSS rules for comments */
}

И мне нравится идея Пекки:

<ul class="comments">
    <?php
    $i = 0;
    while ($i < $num) 
    {
        $name = mysql_result($result,$num - $i,"name");
        $dream = mysql_result($result,$num - $i,"dream");
        ?>
        <li>
            <ul>
                <li><?php echo $name; ?></li>
                <li><?php echo $dream; ?></li>
            </ul>
        </li>
        <?php
        ++$i;
    }
    ?>
</ul>

И затем в вашем CSS (и вы можете добавить еще больше классов для каждого имени, мечты и т. Д.)

ul.comments {
    /* CSS rulse for a nice background etc for the whole group of comments */
}
ul.comments ul {
    /* CSS rules for each comment */
}
ul.comments ul li {
    /* CSS rules for each subsection of a comment
       You could make separate classes for these too */
}