2

別の CSS の質問です。

<li>タグ内、タグ内に div ボックスがあります<ul>。div タグにはそれぞれ画像が含まれており、画像の下にテキストがあります。画像はすべて同じサイズですが、テキストの長さは同じではありません。そのため、div ボックスはすべて同じサイズではありません。画像の上部を揃えたいのですが、今は階段のように見えます。div の高さを変更しようとしましたが、それはボックスを上ではなく下に拡張します。ここに私がこれまでに持っている対応するコードがあります。

<ul>
        <li class="line2"><div style="width:284px;border:3px;border-style:solid;"><img class="border" src="/images/icons/1.png" width="284" height="164" alt=""/><p>Paragraph.</p></div></li>
        <li class="line2"><div style="width:284px;border:3px;border-style:solid;"><img class="border" src="/images/icons/2.png" width="284" height="164" alt=""/><p>Longer Paragraph</p></div></li>
        <li class="line2"><div style="width:284px;border:3px;border-style:solid;"><img class="border" src="/images/icons/3.png" width="284" height="164" alt=""/><p>Longest Paragraph</p></div></li>
        </ul>

(境界線は、私が作業しているものを見ることができるようにするためのものです)

画像とテキストを別々の div に分割できることはわかっていますが、すでに多くの異なる div があるため、少しやりすぎているように感じます。これが最善の方法である場合は、そうしますが、確実に知りたいです。

誰かがこれを手伝うことができれば、本当に感謝しています。ありがとう。

4

2 に答える 2

0

タグは基本的<div>に改行で論理的に区切りをつけます。そのため、階段のように表示されます。したがって、代わりにタグを試してみることをお勧めします<span>。これにより、ボックスを水平に配置できます。これが役立つことを願っています

于 2013-02-16T08:35:59.120 に答える
0

最も明白なことを除いて、すべてを試しました。<br/>最高のものよりも低いもののテキストの下にタグを追加しました. おそらくこれを行うためのより良い方法があることは知っていますが、私にとって最も簡単なものは何でもうまくいきます。

于 2013-02-16T21:05:18.633 に答える