css - CSSを使用してdiv内の画像の下に2つのスパンを揃えます

Question

div には 3 つの要素があります。2 つのスパンと画像です。画像の下に両方のスパンを揃える必要があります。1 つのスパンは左側に、もう 1 つのスパンは右側にあります。div の幅は 180px です (問題がある場合)。どんな助けでも大歓迎です。

Answer 1

HTML コード:

<div>
    <img src="" width="" height="" alt="" />
    <span class="left"></span>
    <span class="right"></span>
</div>

CSS スタイル

div { overflow: hidden; width: 180px; }
span { display: block; }
.left { float: left; }
.right { float: right; }

画像が div 要素を埋めない場合は、「clear: both」を.leftに追加してください。