修改

Question

目前有2个div ...左边是满满的内容，右边是300px宽的侧边栏。我希望他们能够并排，左右，但似乎无法做到正确。我需要左侧div占据整个屏幕，而不是正确div的300px。

是否可以在左边的右边距中设置正确的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的右边。

Answer 1

更改左右div顺序，如：

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

从CSS中的float:left移除#left，然后将#right更改为float:right

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

编辑：

我的解决方案应该与position: fixed;一起使用，只需记住将right:0添加到固定的div。

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

Answer 2

将您的标记更改为：

<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将自动占据浮动“侧边栏”旁边的整个空间。

Answer 3

您可以向#left div添加width:100%和负边距，而不是重新排序内容。

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是不必要的（并且无论如何都不会工作）。相反，只需设置固定的定位，你就可以了。

相关CSS，使用与上述相同的HTML

#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

Answer 4

看看：

创建具有负边距的液体布局（http://alistapart.com/article/negativemargins）

Answer 5

The problem with some of the answers is that you may not want to re-order the content because you may want the ability to move the right div under the left div in a responsive design, which would get increasingly more difficult if we reorder the content. Unfortunately @DACrosby's answer can lead to some wicked overlap of the right div on top of left div's content.

My solution was to set a positive padding-right that matches the negative margin-right on the left div, and set box-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;
}

This works with or without the position:fixed; right div.

jsFiddle

CSS宽度100％ - 保证金权利

5 个答案:

修改