css - 1 つの列を左にフロートさせ、もう 1 つの列をページの残りの部分に配置

Question

基本的な考え方は、1 つの div を静的な幅で左にフロートさせ、別の div を右にフロートさせてページの残りの幅を埋めることです。どうすればこれを達成できますか?

これまでのところ、CSS で次のようなものを使用してきました。

width: calc( 100% - 325px );

しかし、最適なクロスブラウザソリューションを探しています。

score 3 · Accepted Answer

left をfloat: leftにし、残りをoverflow: hiddenにするだけです:

.left {float: left; width: 200px;}
.full {overflow: hidden; width: auto;}

display: tableを使用してそれらを作成することもできます.....しかし、質問は上記のものでした。

score 0 · Accepted Answer

マージンを使った簡単なトリック

.sidebar{
   position: absolute;
   left: 0;
   top: 0;
   width: 325px;
}

.container{
   margin-left: 325px;
}

簡単な例

4 に答える 4