12

これは、説明するよりも表示する方が簡単です: http://jsfiddle.net/gN4VZ/

ここに画像の説明を入力

右にフローティングしたコンテンツ (青) を左にフローティングしたコンテンツ (赤) に重ねて配置することはできますか?

4

2 に答える 2

20

絶対配置を使用できます。

それ以外の

float: right

使用する:

position: absolute;
right: 0;

そして代わりに

float: left

使用する:

position: absolute;
left: 0;

絶対位置がページではなくそれぞれのコンテナーに対して相対的になるように、必ずposition: relative;親に設定してください。div

于 2012-05-04T12:47:41.683 に答える
2

.boxに設定されたクラスで絶対配置を使用しposition:relativeます。

http://jsfiddle.net/gN4VZ/1/

.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 の高さが不要になります。

http://jsfiddle.net/gN4VZ/2/

于 2012-05-04T12:48:38.963 に答える