这个问题在这里已有答案：
如何让#content坐在#menu旁边，同时占据#container宽度的其余部分;
<div id="container">
<div id="menu">
</div>
<div id="content">
</div>
</div>
注意：我需要#menu固定200px宽度
你可以使用flex：
#container {
display: flex;
width: 100%;
}
#menu {
width: 200px;
background: red;
}
#content {
flex: 1;
background: yellow;
}<div id="container">
<div id="menu">
foo
</div>
<div id="content">
foo
</div>
</div>或网格布局
#container {
display: inline-grid;
grid-template-columns: 200px auto;
width: 100%;
}
#menu { background: red; }
#content { background: yellow; }<div id="container">
<div id="menu">
foo
</div>
<div id="content">
foo
</div>
</div>你可以在css中使用calc（）函数。
#container { width:100%; }
#menu { background:red; float:left; width:200px; }
#content { background:yellow; float:left; width:calc(100% - 200px) }<div id="container">
<div id="menu">
foo
</div>
<div id="content">
foo
</div>
</div>您可以将CSS添加到两个div，即float属性。
#menu{
float: left;
width: 200px;
}
#context{
float: right;
}
我不知道你是否明白你的意思： 你想div #menu是200px的确切大小，不管里面是什么？ 解： 你需要在css中这样做： 主要包括3种不同类型的css
1.身体内部标签:(用于没有任何相同的小网站，大多数程序员讨厌，如果你这样做）
<div id="container">
<div id="menu" style="width: 200px;">
</div>
<div id="content">
</div>
</div>
2.在头部标签:(用于看起来相同的小网站，大多数程序员为小型网站做这个）
<head>
<style>
.menu{
width:200px;
}
</style>
</head>
<body>
<div id="container">
<div class="menu" id="menu">
</div>
<div id="content">
</div>
</div>
</body>
3.inside a .css文件:(用于具有统一外观的大型网站） HTML：
<head>
<link rel="stylesheet" type="text/css" href="maincss.css">
</head>
<body>
<div id="container">
<div class="menu" id="menu">
</div>
<div id="content">
</div>
</div>
</body>
CSS：
.menu{
width:200px;
}
幸运的是，有一个相当容易的解决方案。您唯一需要做的就是为内容的div添加一个隐藏的溢出。
#content {
overflow: hidden;
}
祝你好运。
达斯月亮