Php 文本导致CSS放置问题

我有一个漫画网站，并希望在每个漫画缩略图下放置文本（数据库字段“描述”）

我有两个问题：

问题1）我不知道为什么，但当我把文本放在漫画下面时，它会迫使它下面的漫画行偏移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'
'；
回显“”。
“

”$行['description'].'；
回音“
”；

我觉得我做的CSS是正确的，所以不知道为什么它会被抵消

问题2）

我在底部添加文本的唯一原因是因为Go Daddy说我没有足够的关键词出现在我的页面上，例如“漫画”或“艺术品”用于搜索引擎优化。如果我添加这个文本，通常包括关键字，这会提高我的搜索引擎优化吗

谢谢

编辑-----

如果我做

显示：内联块和
垂直对齐：文本顶部对于li，我是否需要每个帖子的文本？否则，它似乎会笨拙地向上推一张图片

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

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

”$行['description'].'

尽管您可能希望将其他换行跨距也更改为div…
但您可以尝试使用明显独立的行，这不会影响下面的行的浮动方式。您可以通过在每行的漫画缩略图集后添加以下内容来完成此操作：

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



请参阅此工作示例：
如果不能保证每个元素具有相同的高度，则希望显示：内联块，而不是浮动。此外，它应该位于
li
上

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

您可以在
li
中填充任何您想要的内容，每一行都将排列在顶部。演示（使用div）：
文本可能重叠到下面的行中，这意味着
float:left
会自动移动。您可以使用Chrome检查器通过突出显示HTML元素来识别这一点。添加有关漫画的其他信息也可能有助于您的搜索引擎优化，因为有更多相关的关键字出现。@diggerworld将其放在答案中！；）如果有人需要想象它：也许这很愚蠢，但是你有没有试过设置你漂浮的元素的高度？还有最大高度？这应该能让他们保持秩序，不是吗？@hakre，这似乎管用。所以我想我应该这么做，为什么要加上“每个漫画下面都有相同数量的文字”的限制呢？如果图像和文本高于50px，或者在某些操作系统上以不同于预期的字体缩放或显示，该怎么办<代码>高度
属性将裁剪内容：（我假设他的描述总是相对简短和统一的，但是是的，你可能会遇到你描述的问题。谢谢cimmanon，但是如果我做
display:inline block；
和
verticle align:text top；
，我是否需要每篇文章的文本？否则它似乎会笨拙地向上推一幅图像。请参见上面的edit.Nope。您只需要在图像上使用不同的样式：。为它们提供
显示：block
就足够了。@Growler如果这样做，请确保在文本行之后添加
。这样，无论文本行有多高，图像都应该正确排列
li {
  display: inline-block;
  vertical-align: text-top;
}