2011-08-11 8 views
0

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

問題がどこにあるのか分からないので、DDタグの一部に含まれているインフォボックス(入力の右側に青色のボックスがあり、そこには入力に関する余分な情報が残っています)それは絶対的に位置づけられている。 DDタグの高さは入力ボックスが伸びる限り制限されているので、情報ボックスは切り取られています。どういうわけか、それに対応する情報ボックスを持つDDタグの高さを拡張する必要があります。

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

を、私は2つの例を持って、情報ボックスは、最後の入力であるときに1があるので、これはそれがフォームの最後に張り出すことを意味しますが、それはOKです。 2番目の例は最初の入力の情報ボックスですが、内容の量に応じて両方の入力を超えて伸びる可能性があります。ご覧のとおり、両方のケースで切り捨てられます(特にFFで表示されている場合)。 HRタグをレイアウトの目的のために残しておく必要があります。

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

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

+0

jsfiddle.netにリンクしてコードを表示すると、編集しやすくなります – JMax

答えて

1

DLにoverflow:hiddenを使用して浮動小数点をクリアすると、絶対配置されたブロックが非表示になります。その他の方法により、

  • クリアフロート、例えば、clearfixを使用して::

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

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

    はそれを修正するには、いくつかの方法があります

    dl { 
        zoom: 1; 
    } 
    
+0

答えがありがとうございます。 DLタグでclearfixを試しましたが、まだ動作していません:( – Barnesy

+0

'clearfix'を追加しましたが、' DL'から 'overflow:hidden'を削除しませんでした。 。 – kizu

関連する問題