Question

我无法按照自己的意愿定位div。这是我想要的布局模式。

http://cl.ly/1q2s0k283A3M2u2N1b0D [已编辑]

红色部分是造成问题的部分。我希望它从左侧边栏到窗口的右边界。

我该怎么办？

Answer 1

部分代码：http://jsfiddle.net/zZqaM/3/。

制作一个宽度固定的容器。在里面，一个条形，宽度固定，float: left;。接下来，在内部，内容div向右浮动，内部标题，填充内容div宽度。

Answer 2

我猜你的左栏（一个菜单？）有一个固定的宽度，所以这是一个有效的例子：

#header {
    width: 100%;
    height: 40px;
    background: blue;
}
#content{
    height: 300px;
    width: 100%;
}
#left_bar {
    float: left;
    margin-left: 20px;
    width: 100px;
    height: 100%;
    background: green;
}
#right_bar {
    margin-left: 120px;
    height: 100%;
    background: yellow;
}
#header_right {
    width: 100%;
    height: 30px;
    background: red;
}

<body>
<div id="header">
</div>
<div id="content">
    <div id="left_bar">
    </div>
    <div id="right_bar">
        <div id="header_right">
        </div>
    </div>
</div>

Answer 3

绝对定位可以做任何事情！

jsFiddle

您可以通过修改最后一个属性来指定浏览器窗口左侧和侧边栏之间需要多少空格：

#sidebar,
#red {
    left:20px; /* change this to anything, change to 0 if none is desired  */
}

Answer 4

我决定做一个新答案而不是编辑，因为这是一个完全不同的方法：

jsFiddle

关键因素：

有一个虚拟元素（#dummy），它将菜单栏的背景颜色扩展到浏览器窗口的右侧，纯粹是出于装饰目的。
#sidebar绝对定位，以便它延伸到浏览器窗口的底部。
#sidebar，#content和#menu位于#container中，其宽度固定且margin:0 auto已应用，因此它始终位于浏览器中心。

将div从侧边栏定位到窗口的右边框

4 个答案:

关键因素：