php - 文本导致 CSS 放置问题

Question

我有一个漫画网站，想在每个漫画缩略图下放置文本(数据库字段“描述”)。

我有两个问题:

问题 1) 我不确定为什么，但是当我将文本放在漫画下方时，它会强制其下方的漫画行偏移一个。

但除此之外，没有文字......它排列得很好:

CSS如下:

    .comics {
    float: left;
    padding: 15px 5px 30px 15px;
    margin: 10px;
    background: url(images/SiteDesign/comicbg.png) no-repeat 0 0;

    /*Need to set width on this >= to thumber width so description text will wrap*/
    width: 220px;
    font-family: "Trebuchet MS", Helvetica, sans-serif;

}

PHP:

    echo '<li>';
    echo    '<span class="comics"><a href=".?action=viewimage&site='.$site. '&id=' . $row['id'] .'">
            <img src="./scripts/thumber.php?img=.' . $thumbpath.$row['thumb'] . '&mw=220&mh=220"/></a>' . 
            '<br /><br /> ' . $row['description'] . '</span>';                              
echo '</li>';

我觉得我正在正确地执行 CSS，所以不确定它为什么会偏移。

问题 2)

我在底部添加文本的唯一原因是因为 Go Daddy 说我的页面上没有足够的关键字出现次数，例如“漫画”或“艺术品”，无法用于 SEO。如果我添加此文本(通常包括关键字)，是否会改善我的 SEO？

谢谢!

编辑 -----

如果我对 li 执行 display: inline-block; 和 verticle-align: text-top;，我需要为每个帖子添加文本吗？否则它似乎笨拙地向上推了其中一张图片。

Answer 1

如果您不能保证每个元素都具有相同的高度，您需要display: inline-block，而不是 float 。此外，它应该在 li 上。

li {
  display: inline-block;
  vertical-align: text-top;
}

你可以在 li 中填充任何你想要的东西，每一行都将排在顶部。演示(使用 div):http://jsfiddle.net/ffr3M/