圣杯布局

2018-07-30sad creeper

// html

<body>
<div class="main">aaaa</div>
<div class="left"></div>
<div class="right"></div>
</body>


// css

body{
margin: 0;
min-width: 1000px;
}

.left {
float: left;
width: 200px;
height: 200px;
background: #f66;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 200px;
background: #f66;
margin-left: -200px;
}
.main {
float: left;
height: 250px;
width: 100%;
background: #fcc;
box-sizing: border-box;
padding: 0 200px;
}

效果图:

阅读 74 评论