Question

body {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 13px;
            }

            #wrapper {
                padding: 1px;
                margin: 0 auto;
            }

            #left {
                width: 200px;
                float: left;
                background: orange;
                position: fixed;
                text-align: center;
                padding: 2px;
            }

            #content {
                float: right;
                text-align: left;
                padding: 2px;
                width: ???;
                background: #F0F0F0;
            }

你好再次stackoverflow！我想创建一个简单的布局，菜单宽度为200px，内容div占用宽度的其余部分......但是我该怎么做呢？

我已经在谷歌和其他stackoverflow主题上搜索过，但我找不到任何东西......

问候

修改：我再次尝试搜索goolge，我找到了一个示例： http://www.thesitewizard.com

但是因为他有一些奇怪的div名字，我不知道他用什么代码来代替div ...

Answer 1

您可以将浮点数与保证金结合使用，以达到您想要的效果。要获得您想要的内容，您的HTML结构应该类似于：

<div id="wrapper">
    <div id="menu">place your content here</div>
    <div id="main">place your content here</div>
</div>

所需的最低CSS应如下所示：

#menu { float: left; width: 200px; }
#main { margin-left: 200px; }

我添加了一个demo on jsfiddle，以便在某些背景颜色的帮助下显示结果。

Answer 2

使用display:table, display:table-row, display:table-cell元素怎么样？

jsFiddle这里：jsFiddle

display：现在所有浏览器都支持表格，因此在2013年我会使用此

Answer 3

你可以使用

width:100%;
padding-left:200px;
float:right;

表示#content和

width:200px;
float:left;
padding-left:-200px;

表示#left

Answer 4

我很惊讶没有人回复CSS：flex此时

display:flex;

有关使用此属性的所有方法的教程，请尝试flexbox froggy

左div 200px宽度，其余内容div？

4 个答案: