CSS三栏布局

圣杯布局

1.首先给出基本的html结构和css样式

<div id="container">
  <div id="main">main</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>

* { box-sizing: border-box; }

#container {
  width: 100%;
  height: 200px;
  background-color: teal;
  overflow: hidden;
}

#main {
  float: left;
  min-width: 400px;
  width: 100%;
  height: 200px;
  background-color: olive;
}

#left {
  float: left;
  width: 100px;
  height: 200px;
  background-color: orange;
}

#right {
  float: left;
  width: 150px;
  height: 200px;
  background-color: green;
}

三栏没有在一行显示

2.为左右两栏添加负边距拉回第一行

#left {
  margin-left: -100%;
}
#right {
  margin-left: -150px;
}

此时已经显示为一行(但是main被遮住了)

3.为container添加padding空出左右块的位置

#container {
  padding: 0 150px 0 100px;
}

此时左右空出宽度但是中间被挤进去了(main还是遮住的状态)

4.为左右块添加相对位移

#left {
    position: relative;
    left: -100px;
}
#right {
    position: relative;
    left: 150px;
}

此时圣杯布局就完成了

请查看示例
还有一种方法就是将right盒子的样式改为 { margin-right: -150px; } 这样就无需使用相对定位了

双飞翼布局

1.首先给出基本的html结构和css样式

<div id="main">
  <div id="main-inner">main-inner</div>
</div>
<div id="left">left</div>
<div id="right">right</div>

* { box-sizing: border-box; }

body {
  main-width: 400px;
}

#main {
  float: left;
  min-width: 400px;
  width: 100%;
  height: 200px;
  background-color: teal;
}

#main-inner {
  margin: 0 150px 0 100px;
  height: 200px;
  background-color: olive;
}

#left {
  float: left;
  width: 100px;
  height: 200px;
  background-color: orange;
}

#right {
  float: left;
  width: 150px;
  height: 200px;
  background-color: green;
}

三栏没有在一行显示

2.为左右两栏添加负边距拉回第一行

#left {
  margin-left: -100%;
}
#right {
  margin-left: -150px;
}

此时已经显示为一行

这里是示例