主要介绍了css实现右侧固定宽度 左侧宽度自适应,这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧需要的朋友可以参考下
【CSS布局实现】在网页设计中，经常需要创建一种布局模式，使得页面右侧部分具有固定宽度，而左侧部分根据浏览器窗口大小自适应调整宽度。这种布局模式在许多网站，包括博客园的一些默认主题中非常常见。通常，固定宽度的区域用作侧边栏，展示诸如导航、广告或辅助信息，而自适应宽度的区域则是主要内容区，显示文章或主要信息。
要实现这种布局，我们可以使用CSS的多种技术。以下是两种常见的方法：
**方法1：浮动和margin**
对于右侧固定宽度、左侧自适应的布局，我们可以让固定宽度区（例如`#sidebar`）向右浮动，并设定一个固定的宽度。同时，自适应区（例如`#content`）不设置宽度，而是通过设置`margin-right`来确保与浮动元素保持在同一行。例如：
```css
#wrap {
overflow: hidden; /* 清除浮动 */
zoom: 1;
}
#content, #sidebar {
background-color: #eee;
}
#sidebar {
float: right;
width: 300px;
}
#content {
margin-right: 310px;
}
#footer {
background-color: #f00;
color: #fff;
margin-top: 1em;
}
```
在这个示例中，`#content`的`margin-right`值比`#sidebar`的宽度大一点，使得两个区域能并列显示。当浏览器窗口缩小时，`#wrap`的宽度会变小，`#content`的实际宽度会相应减少，但由于其宽度是相对的（减去`margin-right`的值），因此布局依然保持正确。
然而，这种方法的一个限制是HTML结构中`#sidebar`必须在`#content`之前。如果需要`#content`在前，那么需要使用其他方法。
**方法2：绝对定位**
如果需要`#content`在前，可以使用绝对定位来解决。我们将`#sidebar`设为绝对定位，脱离常规流，而`#content`则保留默认的流布局。例如：
```css
#wrap {
position: relative; /* 作为定位的参照物 */
}
#content {
height: 340px;
}
#sidebar {
position: absolute; /* 绝对定位 */
top: 0; /* 顶部对齐 */
right: 0; /* 右侧对齐 */
width: 300px;
}
#footer {
background-color: #f00;
color: #fff;
margin-top: 1em;
}
```
在这个案例中，`#sidebar`的宽度是固定的，而`#content`会占据剩余的宽度，从而实现自适应效果。
这两种方法各有优缺点。浮动方法适用于HTML结构不可调整的情况，而绝对定位方法更适合于需要`#content`在前的场景。无论选择哪种方法，都需要确保在布局中考虑到响应式设计，确保在不同屏幕尺寸和设备上的兼容性。
在进行CSS布局时，了解和掌握各种布局技术是非常重要的，这有助于创建更加灵活和适应性的网页设计。此外，随着CSS Grid和Flexbox的普及，现代布局方案提供了更强大、更简洁的方式来实现这种两侧布局，值得学习和使用。
- 1
- 2
前往页