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

Posted 2023-03-06

【中文标题】左 div 200px 宽度，内容 div 其余部分？

【英文标题】：Left div 200px width, content div the rest?

【发布时间】：2011-06-30 17:34:41

【问题描述】：

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;
            

你好再次***！ 我想创建一个简单的布局，菜单宽度为 200 像素，内容 div 占据其余宽度......但我该怎么做呢？

我已经在 google 和其他 *** 主题上进行了搜索，但我找不到任何东西...

问候

编辑：我再次尝试在 goolge 上进行搜索，并找到了一个示例： http://www.thesitewizard.com

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

【问题讨论】：

使用百分比怎么样？ - 左侧宽度 20% 和内容宽度 75%，中间有 5% 的装订线

不，在不同的屏幕宽度下看起来很奇怪......

【参考方案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 以在一些背景颜色的帮助下显示结果。

【讨论】：

margin-left: auto; 在这种情况下是更好的方法，您无需重复 200px

【参考方案2】：

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

jsFiddle 在这里：jsFiddle

display:table 现在所有浏览器都支持，所以在 2013 年我会使用它

【讨论】：

它已经过时了，display: flex; 是新方法（15 年 11 月）

【参考方案3】：

你可以使用

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

对于#content 和

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

对于#left

【参考方案4】：

我很惊讶没有人回复 CSS：flex 在这一点上

display:flex;

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