0

http://jsfiddle.net/Lijo/SCYVN/4/に示すようなHTMLがあります 。

青い枠線の「optionLine」クラスがあります。ただし、オーバーフローが設定されていない場合、境界線は期待どおりに機能しません。オーバーフローが設定されている場合は正常に動作します。

  1. このシナリオでオーバーフローが必須なのはなぜですか？

  2. オーバーフローせずに動作させる方法はありますか？

コード

.optionLine
{
display:block;
border: 1px solid blue;
/*overflow:auto;*/
}

参照：

  1. divを動的に追加するときに、親Divは高さを調整しません
4

5 に答える 5

4

境界線のある要素の子要素がフロートしているため、境界線が正しく機能しません。

コンテナが正しい予想寸法になるように、フローティング要素をクリアする必要があります。

クリアフィックス情報については、こちらをご覧ください

このSOの質問には、さまざまな状況に対する非常に詳細な説明と解決策も含まれています。最近、私はこのdisplay:table方法を頻繁に使用しています...

于 2012-09-20T07:46:51.323 に答える
2

これを試してくださいhttp://jsfiddle.net/SCYVN/6/

.optionLine
{
    display: table;
    border: 1px solid blue;
    /*overflow:auto;*/
    width:100%;
}
于 2012-09-20T07:54:37.147 に答える
1

をドロップfloat:left;する.optionItemと修正されます。これを行いたくない場合は、（フロートされたアイテムの各行に対して）とフロートされたアイテムの後にラッパーを追加する必要がありますclear: both;...

ただし、追加することoverflow: auto;が常に最善の方法です。

于 2012-09-20T07:51:04.437 に答える
1

あなたのアイテム（コンテナ内）が浮いているからです。フローティングアイテムは、ドキュメントの通常のフローの範囲外です。ドキュメントのフローを元に戻すには、フロートをクリアする必要があります（コンテナーでoverflow：autoを使用するか、clear：leftまたはclear：両方が指定されている別の要素を追加します）。

于 2012-09-20T07:47:06.470 に答える
-1

アウトラインdivの幅と高さを設定する必要があります

元：

border: blue 1px solid;
width:500px;
height:50px;
于 2012-09-20T08:00:19.713 に答える