HTML + CSS 經典佈局

HTML 代碼：

<div class="i-box clearfix">
        <div class="layout-l clearfix">
            <div class="i-left">
                <p>左側定寬</p>
            </div>
            <div class="i-right">
                <p>右側自適應</p>
            </div>
        </div>
    </div>

    <div class="i-box clearfix">
        <div class="layout-r clearfix">
            <div class="i-right">
                <p>右側定寬</p>
            </div>
            <div class="i-left">
                <p>左側自適應</p>
            </div>
        </div>
    </div>

    <div class="i-box clearfix">
        <div class="layout-both clearfix">
            <div class="i-left">
                <p>左側定寬</p>
            </div>
            <div class="i-right">
                <p>右側定寬</p>
            </div>
        </div>
    </div>

    <div class="i-box clearfix">
        <div class="layout-three clearfix">
            <div class="i-left">
                <p>左側定寬</p>
            </div>
            <div class="i-right">
                <p>右側定寬</p>
            </div>
            <div class="i-mid">
                <p>中間自適應</p>
            </div>
        </div>
    </div>

    <div class="i-box clearfix">
        <div class="layout-three-ll">
            <div class="i-left">
                <p>左側定寬</p>
            </div>
            <div class="i-mid">
                <p>左側定寬</p>
            </div>
            <div class="i-right">
                <p>右側自適應</p>
            </div>
        </div>
    </div>

    <div class="i-box clearfix">
        <div class="layout-three-rr">
            <div class="i-mid">
                <p>右側定寬</p>
            </div>
            <div class="i-right">
                <p>右側定寬</p>
            </div>
            <div class="i-left">
                <p>左側自適應</p>
            </div>
        </div>
    </div>

 

以前是用less寫的樣式，可能用起來會靈活一些，在這裏提供less和CSS兩個版本

Less 代碼：

/* @base-width 容器寬度 能夠爲 px 或 百分比 */
@base-width: 100%;
/*
 * @fix-width-l  左側固定寬度 能夠爲 px 或 百分比
 * @fix-width-r  右側固定寬度 能夠爲 px 或 百分比
 */
@fix-width-l: 300px;
@fix-width-r: 300px;
@bg-color1: blue;
@bg-color2: red;
@bg-color3: green;

.i-box{
    width: @base-width;
    margin: 10px auto;
}
//  左側定寬, 右側自適應
.layt1(@f-width,@color1,@color2){
    > .i-left {
      float: left;
      width: @f-width;
      background-color: @color1;
    }
    > .i-right{
      overflow: auto;
      background-color: @color2;
    }
}
//  右側定寬, 左側自適應
.layt2(@f-width,@color1,@color2){
  > .i-right {
    float: right;
    width: @f-width;
    background-color: @color1;
  }
  > .i-left{
    overflow: auto;
    background-color: @color2;
  }
}
//  右側定寬, 左側定寬
.layt3(@f-width-l,@f-width-r,@color1,@color2){
  > .i-left {
    float: left;
    width: @f-width-l;
    background-color: @color1;
  }
  > .i-right{
    float: right;
    width: @f-width-r;
    background-color: @color2;
  }
}
// 左右定寬中間自適應
.layt-thr-1(@fix-width-l,@fix-width-r,@color1,@color2,@color3){
    .i-left{
      float: left;
      width: @fix-width-l;
      background-color: @color1;
    }
    .i-mid{
      margin-left: @fix-width-r + 10px;
      margin-right: @fix-width-l + 10px;
      background-color: @color2;
      overflow: auto;
    }
    .i-right{
      float: right;
      width: @fix-width-r;
      background-color: @color3;
    }
}

.layt-thr-2(@fix-width1,@fix-width2,@color1,@color2,@color3){
  .i-left{
    float: left;
    width: @fix-width1;
    background-color: @color1;
  }
  .i-mid{
    float: left;
    width: @fix-width2;
    background-color: @color2;
  }
  .i-right{
    margin-left: @fix-width1 + @fix-width2;
    background-color: @color3;
  }
}

.layt-thr-3(@fix-width1,@fix-width2,@color1,@color2,@color3){
  .i-left{
    margin-right: @fix-width1 + @fix-width2;
    background-color: @color3;
  }
  .i-mid{
    float: right;
    width: @fix-width2;
    background-color: @color2;
  }
  .i-right{
    float: right;
    width: @fix-width1;
    background-color: @color1;
  }
}

.layout-l{
  color: white;
  line-height: 30px;
  .layt1(@fix-width-l,@bg-color1,@bg-color2);
}

.layout-r{
  color: white;
  line-height: 30px;
  .layt2(@fix-width-r,@bg-color1,@bg-color2);
}

.layout-both{
  color: white;
  line-height: 30px;
  .layt3(500px,700px,@bg-color1,@bg-color2);
}

.layout-three{
  color: white;
  line-height: 30px;
  .layt-thr-1(@fix-width-l,@fix-width-r,@bg-color1,@bg-color2,@bg-color3);
}

.layout-three-ll{
  color: white;
  line-height: 30px;
  .layt-thr-2(200px,200px,@bg-color1,@bg-color2,@bg-color3);
}

.layout-three-rr{
  color: white;
  line-height: 30px;
  .layt-thr-3(200px,200px,@bg-color1,@bg-color2,@bg-color3);
}

CSS代碼：

.i-box {
    width: 100%;
    margin: 10px auto;
}
.layout-l {
    color: white;
    line-height: 30px;
}
.layout-l > .i-left {
    float: left;
    width: 300px;
    background-color: #0000ff;
}
.layout-l > .i-right {
    overflow: auto;
    background-color: #ff0000;
}
.layout-r {
    color: white;
    line-height: 30px;
}
.layout-r > .i-right {
    float: right;
    width: 300px;
    background-color: #0000ff;
}
.layout-r > .i-left {
    overflow: auto;
    background-color: #ff0000;
}
.layout-both {
    color: white;
    line-height: 30px;
}
.layout-both > .i-left {
    float: left;
    width: 500px;
    background-color: #0000ff;
}
.layout-both > .i-right {
    float: right;
    width: 700px;
    background-color: #ff0000;
}
.layout-three {
    color: white;
    line-height: 30px;
}
.layout-three .i-left {
    float: left;
    width: 300px;
    background-color: #0000ff;
}
.layout-three .i-mid {
    margin-left: 310px;
    margin-right: 310px;
    background-color: #ff0000;
    overflow: auto;
}
.layout-three .i-right {
    float: right;
    width: 300px;
    background-color: #008000;
}
.layout-three-ll {
    color: white;
    line-height: 30px;
}
.layout-three-ll .i-left {
    float: left;
    width: 200px;
    background-color: #0000ff;
}
.layout-three-ll .i-mid {
    float: left;
    width: 200px;
    background-color: #ff0000;
}
.layout-three-ll .i-right {
    margin-left: 400px;
    background-color: #008000;
}
.layout-three-rr {
    color: white;
    line-height: 30px;
}
.layout-three-rr .i-left {
    margin-right: 400px;
    background-color: #008000;
}
.layout-three-rr .i-mid {
    float: right;
    width: 200px;
    background-color: #ff0000;
}
.layout-three-rr .i-right {
    float: right;
    width: 200px;
    background-color: #0000ff;
}