0

我无法根据需要定位 div。这是我想要的布局模式。

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

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

我能怎么做 ？

4

4 回答 4

0

一些代码：http: //jsfiddle.net/zZqaM/3/。

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

于 2012-05-29T18:54:32.763 回答
0

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

#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>

于 2012-05-29T19:06:02.907 回答
0

绝对定位一切皆有可能！

jsFiddle

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

#sidebar,
#red {
    left:20px; /* change this to anything, change to 0 if none is desired  */
}​
于 2012-05-29T19:13:45.287 回答
0

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

jsFiddle

关键要素：

  • 有一个虚拟元素 ( #dummy) 将菜单栏的背景颜色扩展到浏览器窗口的右侧，纯粹用于装饰目的。
  • #sidebar绝对定位，使其延伸到浏览器窗口的底部。
  • #sidebar, #content, 和 #menu位于 #container 中，该容器具有固定宽度并已margin:0 auto应用，因此它始终在浏览器中居中。
于 2012-05-29T20:28:28.903 回答