と の 2 つのインライン ブロック要素がdtあり<div class="details">ます。
大画面で見ると並んで登場。
ブラウザのサイズが変更<div class="details">されると、次の行にドロップされます。これはインライン要素であるためです。
私の質問は、dt最初に画像のサイズを変更できますか (ブラウザのサイズが変更されたとき - ブラウザの端に到達しない場合)? したがって、私の 2 番目のインライン ブロック要素<div class="details">はまだドロップされません。
画像が特定の幅 (200px としましょう) (または特定のブラウザ幅) に達すると、<div class="details">次の行にドロップします。
これを実現したいのは、デフォルトで<div class="details">は、タッチすると次の行にドロップし、ブラウザのエッジとdtの間にこのギャップが残るためです。dt
おそらくJQueryを使用して、誰かがそれを行う方法を教えてくれることを願っています。ありがとうございました。
HTML
<dl>
<dt><img src="Image Source"/></dt>
<div class="details">
<dd>Name</dd>
<dd>Price</dd>
</div>
</dl>
フィドル