0

フォームに完全に配置されている情報ボックスでいくつかの問題が発生しています。ページの基本的な構成は、DT タグに含まれる各フィールドのラベルと、DD タグに含まれるそのフィールドのその他の関連情報を含む入力ボックスを持つ定義リストを使用することです。

問題がどこにあるかを理解していることから、絶対に配置されたDDタグの一部に含まれる情報ボックス（入力の右側にある青いボックス、左側の入力に追加情報を提供するためにあります）があります. DD タグの高さは入力ボックスが伸びる範囲に制限されているため、情報ボックスは切り取られています。どうにかして、それに対応するための情報ボックスを持つ DD タグの高さを拡張する必要があります。

ここでこの例を見ることができます: http://www.andbarsolutions.com/test-html/form.htm

2 つの例があります。1 つは、情報ボックスが最後の入力にある場合です。これは、フォームの最後にオーバーハングすることを意味しますが、問題ありません。2 番目の例は最初の入力の情報ボックスですが、含まれるコンテンツの量に応じて、両方の入力を超えて広がる可能性があります。ご覧のとおり、両方のケースで途切れています (特に FF で見られる場合)。HR タグはレイアウトのためにあるので、最後に残しておく必要があります。

理想的には、このページで使用できるスクリプトの量が限られているため、スクリプトに頼ることなく、最初にこれに対する CSS 関連の回答があるかどうかを確認したいと思います。前述のように、1、2、3、またはその情報ボックスには 4 行のコンテンツがあるため、動的な高さを持つボックスと見なす必要があります。

これに関するフィードバックをお待ちしております。

4

1 に答える 1

1

問題はoverflow:hidden、on DL を使用してフロートをクリアするため、絶対配置ブロックが非表示になることです。

修正するにはいくつかの方法があります。

  • clearfixを使用するなど、他の方法でフロートをクリアします。

    dl:after {
    content:"";
    display:table;
    clear:both;
}

    条件付きコメントに IE 用の hasLayout を追加します。

    dl {
    zoom: 1;
}
于 2011-08-11T13:52:00.830 に答える