<body> <div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
css代码
<style>
.content {
padding: 0 200px;
height: 200px;
min-width: 200px;/*三块最小宽度减去内边距 200+200+200-200*2*/
}
.left {
float: left;
width: 200px;
height: 200px;
margin-left: -200px;/*使得三部分能显示在同一行中*/
background: red;
}
.center {
float: left;
min-width: 200px; /*设定最小宽度放置中间部分消失*/
height: 200px;
width: 100%;
background: green;
width: 100%;
}
.right {
float: right;
width: 200px;
height: 200px;
margin-right: -200px;
background: yellow;
}
</style>
圣杯布局宗旨：左右两边设定固定宽度，不随浏览器大小该表而改变,并且设置最小宽度，当浏览器很小时底部出现滚轮。中间部分设置宽度为100%继承浏览器的宽度，随浏览器大小改变而改变。
1212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
