如何在css中创建2个菜单栏的布局？

Question

我有下一个标记：

<div id="lefttop"></div>
<div id="leftbottom"></div>
<div id="central"></div>

我需要标记，如下图所示： alt text http://img36.imageshack.us/img36/9894/makeupi.png

Answer 1

#lefttop, #leftbottom {float:left;width:200px;}
#leftbottom {clear:left;}
#central {margin-left:200px;float:right;width: the-width-you-need px}

想一想，宽度：自动可能是#central

的最佳选择

*为早期的所有拼写错误编辑抱歉

Answer 2

你能把#lefttop和#leftbottom放在一个div中吗？像

<div id="left-container">
    <div id="lefttop"></div>
    <div id="leftbottom"></div>
</div>

这样就可以更容易地将它们放在左边。

Answer 3

这对你来说实际上可能稍好一些，因为所有三个div都会缩放/移位以匹配浏览器窗口。

#lefttop {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 50%;
    width: 200px;
    margin-bottom: 5px;
}

#leftbottom {
    position: absolute;
    top: 50%;
    left: 10px;
    bottom: 10px;
    width: 200px;
    margin-top: 5px;
}

#central {
    position: absolute;
    top: 10px;
    left: 220px;
    bottom: 10px;
    right: 10px;
    overflow: auto;
}