css - CSS - 自動幅フロート要素 (エキスパンド可能フロート)

Question

2 つのフローティング カラムが並んでいます。ユーザーは、その列の 1 つを非表示/折りたたむことができます。その場合、コンテナ全体に収まるように他の列を拡張したいと思います。

これはCSSで可能ですか？

レジュメでは、フロートをコンテナのサイズに拡張することは可能ですか? 要素がフローティングであっても、 width:auto がある場合は展開する必要があります。少なくともそれはうまくいくはずだと思います。

Answer 1

いや、受け入れられた答えは実際にはうまくいかないと思います。私はちょうど同じことを試みていました、そしてこれは解決策です...

.left { 
    float: left;
}
.right {
    overflow: hidden;
    /* don't float this one */
}

ここでコードを試してみてください：http：//jsfiddle.net/simoneast/qPHgR/2/

Answer 2

overflow:auto; height:auto;floatet 要素に設定:)

Answer 3

左の列に暗黙的なサイズ (たとえば 250px) があり、右の列がサイズを設定せずにフローティングのみである場合、左の列が折りたたまれたときにコンテナーを満たす必要があります。コードは次のようになります。

#leftcol{
width:250px;
float:left;
clear:none;
}

#rightcol{
float:left;
overflow:hidden;
width:auto; /* This may or may not work */
}