2

dd要素である画像キャプションを壊して、dt要素と同じ幅にしようとしています。幅を使用したくなく、display: inline と float: left を使用しても機能しません。ここにコードと例があります: http://jsfiddle.net/PnyHs/11/。テストにはFirefox 9を使用しています。

私が今思いつくことができる唯一の解決策は、javascript を使用して dt 要素を測定し、その幅を dd 要素に設定することです。

ヘルプと提案をお寄せいただきありがとうございます。

4

3 に答える 3

2

を使用せずに HTML の構造を維持したい場合はmax-width、あえてこれは不可能だと言います。その理由は次のとおりです。

imgオブジェクトが要素を制約することを期待していますdd。ただし、両方の要素は兄弟であり、親によって幅に関してのみ制約を受けることができます (または、要素はその子によって引き伸ばされる可能性があります)。したがって、dd親要素がそれを制限していないため、 は必要なだけ拡張されます。

もちろん、これは親要素の幅を設定することで解決できますが、写真のサイズが異なるため、そうしたくないと述べました。

残念ながら、HTML 構造を変更しない限り、これは JavaScript なしでは不可能です (ここで明らかな何かが欠けていない限り)。

于 2012-01-31T14:20:56.083 に答える
1

画像とキャプションにマークアップを使用dlするのは人為的であり、スタイリングが簡単になるわけではありません。スクリプトを作成したり、画像の幅を明示的に設定したりする必要のない問題 (キャプションを画像と同じ幅にする) への唯一のアプローチは、caption要素を含む単一セルテーブルを使用することです。例：

<table class="photo">
    <caption align="bottom">Image Caption with a very very very very very long    
     text</caption>
    <tr><td>
        <img title="" alt="" src="http://dummyimage.com/120x100/82d91f/fff">
    </td></tr>
</table>
于 2012-01-31T14:37:39.530 に答える
0

要素に幅を追加できますdlか? このhttp://jsfiddle.net/PnyHs/12/のような画像と同じ幅

于 2012-01-31T13:59:53.777 に答える