2

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

我有两个问题：

问题 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 吗？

谢谢！

编辑 - - -

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

在此处输入图像描述

4

3 回答 3

2

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

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

看到这个工作示例：http: //jsfiddle.net/gLMw9/

于 2013-01-06T20:04:34.400 回答
2

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

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

你可以在里面塞进任何你想要的东西li，每一行都会在顶部排成一行。演示（使用 div）：http: //jsfiddle.net/ffr3M/

于 2013-01-06T20:15:50.813 回答
1

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

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

尽管您可能希望将其他包装跨度也更改为 div...

于 2013-01-06T19:27:32.197 回答