0

2 つの div があり、どちらも左に浮いています。「左」の div は、ページの左の列になります。「右」の div がメイン コンテンツになります。

HTML:

<div id="wrapper">
    <div id="content">
        <div id="left">
        </div>

        <div id="right">
        </div>

        <div id="docked_div">
        </div>
    </div>
</div>

CSS:

#wrapper {
    margin: 0 auto;
    margin-top: 35px;
    width: 1005px;
}

#content {
    overflow: hidden;
    background-color: white;
}

#left {
    float: left;
    width: 250px;
    background: red;
}

#right {
    float: left;
    background: blue;
}

これはうまくいきます。これで、 という名前の 3 番目の div ができましdocked_divた。この div は、ラッパーの外側で、div の右側right(div のほぼ20px上right) にある必要があります。そのため、黒い div は左側にありますが、ラッパーの右側と外側にある必要があります。

さまざまな方法で位置を相対または絶対に設定しようとしましたが、必要な結果が得られません。レイアウトの作成に関する CSS の知識があまりないので、提案やガイダンスをいただければ幸いです。

完全な例は次のとおりです: http://jsfiddle.net/TA7Rh/

4

2 に答える 2

1

これを試して。

#docked_div {
    background-size: 100% auto;
    height: 212px;
    position: absolute;
    right: 0;
    width: 53px;
}

これにより、div がメイン div の右側に配置されます。お役に立てれば。

于 2013-05-27T07:08:06.590 に答える
1

これはうまくいくと思います

#wrapper {
    margin: 0 auto;
    margin-top: 35px;
    width: 1005px;
    position: relative;
}

#docked_div {
    /*background: url(../images/mazais_fons.png);*/
    background-size: 100%;
    width: 53px;
    height: 212px;
    position: absolute;
    right:-60px;
}

jsFiddle リンク

必要に応じて正しい位置を変更します。

于 2013-05-27T07:27:46.040 に答える