2 つの div があります。1つはページの左側に、もう 1 つは右側にあります。左側の div は幅が固定されており、右側の div で残りのスペースを埋めたいと考えています。
#search {
width: 160px;
height: 25px;
float: left;
background-color: #ffffff;
}
#navigation {
width: 780px;
float: left;
background-color: #A53030;
}<div id="search">Text</div>
<div id="navigation">Navigation</div>ベストアンサー1
Boushley の回答で私が見つけた問題は、右の列が左の列より長い場合、左の列を折り返してスペース全体を埋め続けることです。これは私が探していた動作ではありません。多くの「解決策」を検索した後、3 列のページを作成するチュートリアル (現在はリンクが無効) を見つけました。
著者は、固定幅、3 つの可変列、外側の列が固定で中央の幅が可変の 3 つの異なる方法を提供しています。私が見つけた他の例よりもはるかにエレガントで効果的です。CSS レイアウトの理解が大幅に向上しました。
基本的に、上記の単純なケースでは、最初の列を左にフロートし、固定幅を指定します。次に、右側の列に最初の列より少し広い左余白を指定します。これで完了です。Ala Boushley のコード:
スタックスニペットのデモはこちらです。jsFiddle
#left {
float: left;
width: 180px;
}
#right {
margin-left: 180px;
}
/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}<div id="left"> left </div>
<div id="right"> right </div>Boushley の例では、左の列が右の列を支えています。左の列が終了するとすぐに、右の列が再びスペース全体を埋め始めます。ここでは、右の列は単にページのさらに奥に配置され、左の列は大きな余白を占めています。フローの相互作用は必要ありません。