一篇文章学会CSS布局（二）

三列布局

1. 第一种方式

  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>

<style>
    #left,
    #center,
    #right {
      height: 300px;
    }

    #left {
      width: 400px;
      background-color: #c9394a;
      float: left;
    }

    #center {
      width: 400px;
      background-color: green;
      float: left;
    }

    #right {
      background-color: #cccccc;
      margin-left: 800px;
    }
  </style>

2. 第二种方式

<style>
    #left,
    #center,
    #right {
      height: 300px;
    }

    #left,
    #right {
      width: 300px;
    }

    #left {
      background-color: #c9394a;
      float: left;
    }

    #center {
      background-color: green;
      margin-left: 300px;
      margin-right: 300px;
    }

    #right {
      background-color: #cccccc;
      float: right;
    }
  </style>

圣杯布局

 <div id="parent">
    <div id="center"></div>
    <div id="left"></div>
    <div id="right"></div>
  </div>

<style>
    #parent {
      height: 300px;
      margin-left: 300px;
      margin-right: 300px;
    }
    
    #left,
    #center,
    #right {
      height: 300px;
      float: left;
    }

    #left,
    #right {
      width: 300px;
    }

    #left {
      background-color: #c9394a;
      margin-left: -100%;
      position: relative;
      left: -300px;
    }

    #center {
      width: 100%;
      background-color: green;
    }

    #right {
      background-color: #cccccc;
      margin-left: -300px;
      position: relative;
      right: -300px;
    }
  </style>

双飞翼布局

 <div id="parent">
    <div id="center">
      <div id="inner"></div>
    </div>
    <div id="left"></div>
    <div id="right"></div>
 </div>

<style>
    #parent {
      height: 300px;
    }

    #left,
    #center,
    #right {
      height: 300px;
      float: left;
    }

    #left,
    #right {
      width: 300px;
    }

    #left {
      background-color: #c9394a;
      margin-left: -100%;
    }

    #center {
      width: 100%;
      background-color: green;
    }

    #right {
      background-color: #cccccc;
      margin-left: -300px;
    }

    #inner {
      height: 300px;
      background-color: hotpink;
      margin-left: 300px;
      margin-right: 300px;
    }
  </style>

等分布局

1. 第一种方式

<div id="parent">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
    <div class="col4"></div>
</div>

<style>
    #parent {
      width: 100%;
      /* <table> */
      display: table;
    }

    .col1,
    .col2,
    .col3,
    .col4 {
      height: 300px;
      /* <td> */
      display: table-cell;
    }

    .col1 {
      background-color: hotpink;
    }

    .col2 {
      background-color: lightblue;
    }

    .col3 {
      background-color: green;
    }

    .col4 {
      background-color: yellow;
    }
  </style>

2. 第二种方式

<style>
    .col1,
    .col2,
    .col3,
    .col4 {
      height: 300px;
      width: 25%;
      float: left;
    }

    .col1 {
      background-color: hotpink;
    }

    .col2 {
      background-color: lightblue;
    }

    .col3 {
      background-color: green;
    }

    .col4 {
      background-color: yellow;
    }
  </style>