2

コミックの Web サイトを持っていて、各コミックのサムネイルの下にテキスト (データベース フィールドの「説明」) を配置したいと考えています。

2 つの質問があります。

質問 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 '<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 の場合、各投稿にテキストが必要ですか? そうしないと、画像の 1 つをぎこちなく押し上げるように見えます。

ここに画像の説明を入力

4

3 に答える 3

2

各要素が同じ高さになることを保証できない場合はdisplay: inline-block、float ではなく が必要です。また、上にある必要がありliます。

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

の中に好きなものを詰め込むことができ、li各行が一番上に並んでいます。デモ (div を使用): http://jsfiddle.net/ffr3M/

于 2013-01-06T20:15:50.813 に答える
2

下の行がどのように浮動するかに影響しない、明確に分離された行を持つことができます。これを実現するには、各行の一連のコミック サムネイルの後に次を追加します。

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

この実際の例を参照してください: http://jsfiddle.net/gLMw9/

于 2013-01-06T20:04:34.400 に答える
1

すべてのコミックの下に同じ量のテキストを追加すると、すべて正しく流れるはずです。すべての説明の周りに高さが固定された div を挿入してみることができます。

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

他のラッピング スパンも div に変更したい場合がありますが...

于 2013-01-06T19:27:32.197 に答える