css实现右侧固定宽度 左侧宽度自适应

主要介绍了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的普及，现代布局方案提供了更强大、更简洁的方式来实现这种两侧布局，值得学习和使用。