2

現在2つのdivがあります...左はコンテンツでいっぱいで、右は幅300pxのサイドバーです。左右に並べて欲しいのですが、うまくいかないようです。画面全体を占める左側のdivから右側のdivの300pxを差し引いたものが必要です。

左のdivの右マージンに右のdivを含めることは可能ですか？

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

#container {
    width: 100%
}
#left {
    float: left;
    margin-right: 350px;
}
#right {
    float: left;
    width: 300px;
    padding-left: 25px;
}

編集：

右側の位置も固定できますか？以下の解決策は機能しますが、正しいdiv位置を作成すると次のようになります。divは左側のdivの右側ではなくなりました。

4

5 に答える 5

3

次のように、左右のdivの順序を変更します。

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

CSSでfloat:leftfromを削除し、に変更します#left#rightfloat:right

#container {
    width: 100%
}
#left {
    margin-right: 350px;
}
#right {
    float: right;
    width: 300px;
    padding-left: 25px;
}

編集：

私のソリューションはで動作するはずですが、固定divposition: fixed;に追加することを忘れないでください。right:0

#container {
    width: 100%
}
#left {
    margin-right: 350px;
}
#right {
    position: fixed;
    right: 0;
    width: 300px;
    padding-left: 25px;
}
于 2013-03-09T21:13:04.880 に答える
1

マークアップを次のように変更します。

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

そしてCSSは：

#left {
    overflow: hidden;
}
#right {
    float: right;
    width: 300px;
    padding-left: 25px;
}

左側のdivは、フロートされた「サイドバー」の横のスペース全体を自動的に占有します。

于 2013-03-09T21:16:40.163 に答える
1

width:100%コンテンツを並べ替える代わりに、＃leftdivに負のマージンを追加するだけで済みます。

http://jsfiddle.net/daCrosby/FGMGB/

HTML

<div id="container">
    <div id="left">Left Col</div>
    <div id="right">Right Col</div>
</div>

CSS

#container {
    width: 100%
}
#left {
    float: left;
    width: 100%; /* full width of #container */
    margin-right: -325px; /* #right's width + left & right padding & margin */
}
#right {
    float: left;
    width: 300px;
    padding-left: 25px;
}

編集

ここの他の場所でのコメントから、あなたはである必要#rightがありますposition:fixed。これにより、要素が要素のスタックから完全に削除されるため、float不要です（とにかく機能しません）。代わりに、固定位置を設定するだけで準備完了です。

上記と同じHTMLを使用した関連CSS

#container2 {
    width: 100%
}
#left2 {
    width: 100%; /* full width of #container */
    margin-right: -325px; /* #right's width + left & right padding & margin */
    background:#ddd;
}
#right2 {
    position:fixed;
    right:8px;
    top:28px; /* set the right and top to whatever positioning you need. */
    width: 300px;
    padding-left: 25px;
    background:#444;
}

jsFiddle

于 2013-03-09T21:30:00.757 に答える
0

を見てみましょう：

負のマージンを使用したリキッドレイアウトの作成（http://alistapart.com/article/negativemargins）

于 2013-11-11T22:23:03.303 に答える
0

一部の回答の問題は、レスポンシブデザインで右のdivを左のdivの下に移動する機能が必要な場合があるため、コンテンツを並べ替えたくない場合があることです。これは、コンテンツを並べ替えるとますます困難になります。 。残念ながら、@ DACrosbyの回答は、左のdivのコンテンツの上に右のdivのいくつかの邪悪なオーバーラップにつながる可能性があります。

私の解決策は、左側のdivpadding-rightの負の値と一致する正の値を設定し、を設定することでした。margin-rightbox-sizing: border-box

.container {
    clear:both;
}
.left {
    box-sizing: border-box;
    float:left;
    width: 100%;
    margin-right: -325px;
    padding-right: 325px;
    background:#ddd;
}
.right {
    box-sizing: border-box;
    background:#666;
    position:fixed;
    right:0;
    width: 300px;
}

これは、position:fixed;適切なdivの有無にかかわらず機能します。

jsFiddle

于 2015-06-15T14:37:10.927 に答える