文本导致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吗？

谢谢！

编辑-----

如果我为li做display: inline-block;和verticle-align: text-top;，我是否需要为每个帖子添加文字？否则它似乎笨拙地推高其中一个图像。

Answer 1

您可以尝试使用明显不同的行，这些行不会影响下面的行如何浮动。您可以通过在每行的漫画缩略图集之后添加以下内容来完成此操作：

<div style="clear:both;"></div>

请参阅此工作示例：http://jsfiddle.net/gLMw9/

Answer 2

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

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

你可以在li内填写任何你想要的东西，每一行都会在顶部对齐。演示（使用div）：http://jsfiddle.net/ffr3M/

Answer 3

如果你在每个漫画下面添加相同数量的文字我会打赌它会全部正确流动。您可以尝试在每个描述周围插入一个固定高度的div，例如：

<div style="height:50px;">' . $row['description'] . '</div>

虽然您可能希望将其他包装跨度更改为div ...