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并更改#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;
}
于 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%您可以在#left div 中添加一个负边距，而不是重新排序内容。

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

于 2013-03-09T21:30:00.757 回答
0

看一眼：

创建具有负边距的流动布局 ( http://alistapart.com/article/negativemargins )

于 2013-11-11T22:23:03.303 回答
0

一些答案的问题是您可能不想重新排序内容，因为您可能希望能够在响应式设计中将右 div 移动到左 div 下，如果我们重新排序内容，这将变得越来越困难. 不幸的是，@DACrosby 的回答可能导致右 div 在左 div 的内容之上出现一些邪恶的重叠。

我的解决方案是设置一个与左侧 div 上padding-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 回答