6、CSS实现圣杯布局_圣杯布局的min-width-CSDN博客

　　CSS圣杯布局是一种经典的三栏布局，其中左右两栏宽度固定，中间栏宽度自适应。以下是一种实现圣杯布局的方法：

　　HTML结构：

　　```html

　　```

　　CSS样式：

　　```css

　　.container {

　　padding: 0 200px; /* 左右栏宽度 */

　　margin: 0 auto; /* 居中显示 */

　　}

　　.main {

　　float: left;

　　width: 100%;

　　}

　　.left {

　　float: left;

　　width: 200px; /* 左栏宽度 */

　　margin-left: -100%;

　　position: relative;

　　left: -200px; /* 左栏位置修正 */

　　}

　　.right {

　　float: left;

　　width: 200px; /* 右栏宽度 */

　　margin-left: -200px;

　　position: relative;

　　right: -200px; /* 右栏位置修正 */

　　}

　　```

　　这段代码中，通过使用浮动和负边距来实现左右两栏的位置调整，主内容栏则占据剩余宽度。通过设置容器的padding值来控制左右两栏的宽度，并使用margin: 0 auto将容器水平居中。

　　需要注意的是，为了保证浮动元素不会溢出容器，可以在容器上设置overflow: hidden属性。

　　这样，你就可以使用这个CSS样式来实现左右布局的圣杯布局效果了。