推荐答案
方式一：使用 float 布局
<div class="container"> <div class="left">左侧固定宽度</div> <div class="right">右侧自适应内容</div> </div>
// www.javascriptcn.com code example
.container {
overflow: hidden; /* 防止父元素高度塌陷 */
}
.left {
float: left;
width: 200px; /* 左侧固定宽度 */
background-color: #eee;
}
.right {
margin-left: 200px; /* 右侧margin值等于左侧宽度 */
background-color: #ccc;
}方式二：使用 flexbox 布局
<div class="container"> <div class="left">左侧固定宽度</div> <div class="right">右侧自适应内容</div> </div>
// www.javascriptcn.com code example
.container {
display: flex;
}
.left {
width: 200px; /* 左侧固定宽度 */
background-color: #eee;
}
.right {
flex: 1; /* 右侧自适应 */
background-color: #ccc;
}本题详细解读
题目分析
本题考察的是 CSS 布局能力，要求实现一个常见的两栏布局：左侧宽度固定，右侧内容根据剩余空间自适应。这在实际开发中非常常见，例如后台管理系统的侧边栏和内容区域。主要考察的知识点包括：
float布局: 理解浮动元素的特性，以及如何清除浮动。margin的使用: 理解margin对于布局的影响，特别是在结合float使用时的计算方式。flexbox布局: 掌握flexbox的基本用法，以及flex属性的含义。- 响应式布局基础: 理解如何让元素在不同屏幕尺寸下自适应。
方式一：float 布局详解
float: left;: 将.left元素向左浮动，使其脱离文档流，并尽可能靠左排列。width: 200px;: 设置.left元素的固定宽度。margin-left: 200px;: 将.right元素的左边距设置为.left元素的宽度，使得.right元素的内容不会被浮动的.left元素覆盖。overflow: hidden;:.container元素添加overflow: hidden;是为了清除浮动带来的父元素高度塌陷问题。当子元素使用了 float，父元素如果没有设置高度，则高度会塌陷为0。overflow:hidden可以触发BFC(Block Formatting Context), 从而让父元素感知到内部浮动元素的高度，撑开父元素的高度。
优点： 兼容性好，是传统的布局方式。
缺点： 需要清除浮动，可能产生一些副作用，布局相对比较复杂。
方式二：flexbox 布局详解
display: flex;: 将.container元素设置为 flex 容器，使其子元素可以通过 flex 布局进行排列。width: 200px;: 设置.left元素的固定宽度。flex: 1;:flex: 1;是flex-grow: 1, flex-shrink: 1, flex-basis: 0;的简写。 它的含义是，.right元素会在父元素剩余空间中尽可能地伸展（flex-grow: 1），且允许在父元素空间不足时收缩(flex-shrink: 1)， 默认大小为0（flex-basis: 0）。这样.right元素就能自动填充剩余的宽度。
优点： 布局简洁，代码可读性高，更适合现代前端开发。
缺点： 兼容性相对 float 稍差，但目前主流浏览器都已经支持。
如何选择
- 如果需要兼容老版本浏览器，或者项目已经使用了大量
float布局，可以使用float方式。 - 如果项目是新项目，或者可以忽略老旧浏览器，推荐使用
flexbox布局，它更简洁高效。
额外说明
这两种方法都能实现要求的效果。 在实际开发中，可以根据项目具体情况选择适合的布局方式。