これは、説明するよりも表示する方が簡単です: http://jsfiddle.net/gN4VZ/
右にフローティングしたコンテンツ (青) を左にフローティングしたコンテンツ (赤) に重ねて配置することはできますか?
これは、説明するよりも表示する方が簡単です: http://jsfiddle.net/gN4VZ/
右にフローティングしたコンテンツ (青) を左にフローティングしたコンテンツ (赤) に重ねて配置することはできますか?
絶対配置を使用できます。
それ以外の
float: right
使用する:
position: absolute;
right: 0;
そして代わりに
float: left
使用する:
position: absolute;
left: 0;
絶対位置がページではなくそれぞれのコンテナーに対して相対的になるように、必ずposition: relative;
親に設定してください。div
.box
に設定されたクラスで絶対配置を使用しposition:relative
ます。
.box
上/下に重ならないように、それぞれに高さを設定する必要があることに注意してください。
あなたの新しいCSSは
.bar {
border:solid 1px black;
color:white;
position:relative;
height:40px;
}
.clear {
clear:both;
}
.left-bar {
background:red;
height:40px;
position:absolute;
left:0;
}
.right-bar {
background:blue;
position:absolute;
right:0;
height:40px;
}
My Head Hurts で提案されているように、正しいものを配置するだけで、外側の div の高さが不要になります。