理解各种css布局(一)

圣杯布局

html结构

<div class="header">头部</div>
<div class="main clearfix">
  <div class="center">中间自适应</div>
  <!-- 因为相对来说，center中为主要内容，所以写前边，这样也有利于SEO -->
  <div class="left">左列定宽</div>
  <div class="right">右列定宽</div>
</div>
<div class="footer">底部</div>

CSS

.header {
  height: 40px;
  background: lightblue;
}
.footer {
  height: 100px;
  background: lightcoral;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.main {
  margin-left: 200px;
  margin-right: 300px;
  /* padding: 0 300px 0 200px; */
}

.center {
  width: 100%;
  height: 500px;
  background: lightgray;
  float: left;
}
.left {
  width: 200px;
  height: 500px;
  background: lightpink;
  float: left;
  margin-left: -100%;
  position: relative;
  left: -200px;
}
.right {
  width: 300px;
  height: 500px;
  background: lightgreen;
  float: left;
  margin-left: -300px;
  position: relative;
  right: -300px;
}

点击查看 demo

双飞翼布局

html

<div class="header">头部</div>
<div class="main clearfix">
  <div class="center">
    <div class="inner">中间自适应</div>
  </div>
  <div class="left">左列定宽</div>
  <div class="right">右列定宽</div>
</div>
<div class="footer">底部</div>

CSS

.header {
  height: 40px;
  background: lightblue;
}
.footer {
  height: 100px;
  background: lightcoral;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.center {
  width: 100%;
  height: 500px;
  background: lightgray;
  float: left;
}
.left {
  width: 200px;
  height: 500px;
  background: lightpink;
  float: left;
  margin-left: -100%;
}
.right {
  width: 300px;
  height: 500px;
  background: lightgreen;
  float: left;
  margin-left: -300px;
}

.inner {
  height: 100%;
  background-color: green;
  margin: 0 300px 0 200px;
}

点击查看 demo

参考

1. CSS 之圣杯布局与双飞翼布局 ↩
2. 深入理解圣杯布局和双飞翼布局 ↩
3. 圣杯布局与双飞翼布局的区别 ↩