CSS两列及三列自适应布局方法整理

jopen 9年前

在传统方法的基础上加入了Flex布局并阐述各方法的优缺点，希望对大家有所帮助。先上目录：

  • 两列布局：左侧定宽，右侧自适应
    • 方法一：利用float和负外边距
    • 方法二：利用外边距
    • 方法三：利用position
    • 方法四：利用flex布局
    </li>
  • 三列布局：左右定款，中间自适应。
    • 方法一：使用负外边距
    • 方法二：使用绝对定位
    • 方法三：使用flex布局
      • </ul> </li> </ul>

      两列布局：左侧定宽，右侧自适应

      方法一：利用float和负外边距

      <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Document</title>      <style>          *{              margin: 0;              padding: 0;          }          .main,.sitebar{              font: bolder 20px/300px;          }          .main{              width: 100%;              float: left;          }          .main .content{              margin-left: 200px;              background-color: red;          }          .sitebar{              width: 200px;              float: left;              background-color: green;              margin-left: -100%;          }      </style>  </head>  <body>      <div class="main">          <div class="content">右侧主体自适应区块</div>      </div>      <div class="sitebar">左侧定宽200px区块</div>  </body>  </html>

      • 优点：考虑了页面优化，右侧主内容区先加载，左侧后加载。

      • 缺点：多添加了一层div包裹。

      方法二：利用外边距

      <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Document</title>      <style>          *{              margin: 0;              padding: 0;          }          .sitebar{              float: left;              width: 200px;              background-color: green;          }          .content{              background-color: red;              margin-left: 200px;          }      </style>  </head>  <body>      <div class="sitebar">左侧定宽200px区块</div>      <div class="content">右侧主体自适应区块</div>  </body>  </html>

      • 优点：代码简洁，便于理解

      • 缺点：不利于页面优化，右侧主内容区后加载

      方法三：利用position

      <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Document</title>      <style>          *{              margin: 0;              padding: 0;          }          .sitebar{              width: 200px;              background-color: green;          }          .content{              position: absolute;              left: 200px;              right: 0;              top: 0;              background-color: red;          }      </style>  </head>  <body>      <div class="content">右侧主体自适应区块</div>      <div class="sitebar">左侧定宽200px区块</div>  </body>  </html>

      • 优点：考虑到了页面优化，右侧内容区先加载

      • 缺点：暂时没想到。。

      上述三种方法兼容 IE7 以上，但在IE7下不设置高度时，会产生高度错位bug。可通过设置父元素 font-size=0 ，再分别设置 子元素 font-size解决。

      方法四：利用flex布局

      <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Document</title>      <style>          *{              margin: 0;              padding: 0;          }          .main{              display: flex;          }          .content{              flex:1;              background-color: red;          }          .sitebar{              flex:0 0 200px;              order:-1;              background-color: green;          }                </style>  </head>  <body>  <div class="main">      <div class="content">右侧主体自适应区块</div>      <div class="sitebar">左侧定宽200px区块</div>  </div>      </body>  </html>

      • 优点：CSS3新布局方式，高大上

      • 缺点：仅支持 IE11+ 。

      三列布局：左右定款，中间自适应。

      方法一：使用负外边距

      <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Document</title>      <style>          *{              margin: 0;              padding: 0;          }          .main,.left,.right{              height: 300px;              font: 20px/300px;              color: #fff;              text-align: center;          }          .main{              width: 100%;              float: left;          }          .main .content{              margin: 0 300px 0 200px;              background-color: black;          }          .left{              width: 200px;              float: left;              margin-left: -100%;              background-color: red;          }          .right{              width: 300px;              float: left;              margin-left: -300px;              background-color: blue;          }      </style>  </head>  <body>      <div class="main">          <div class="content">中间主体区域宽度自适应</div>      </div>      <div class="left">左侧定宽200px</div>      <div class="right">右侧定宽300px</div>  </body>  </html>

      • 优点：兼容IE7+，考虑到页面优化，中间内容区先加载

      • 缺点：多一层div嵌套，不易理解

      方法二：使用绝对定位

      <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Document</title>  <style>  body{      margin:0px;  }  #left {      background-color: #E8F5FE;      border: 1px solid #A9C9E2;      height: 400px;      width: 100px;      position: absolute;      top: 0px;      left: 0px;  }  #center {      background-color: #F2FDDB;      border: 1px solid #A5CF3D;      height: 400px;      margin-right: 102px;      margin-left: 102px;  }  #right {      background-color: #FFE7F4;      border: 1px solid #F9B3D5;      height: 400px;      width: 100px;      position: absolute;      top: 0px;      right: 0px;  }  </style>  </head>    <body>      <div id="center">中列</div>      <div id="left">左列</div>      <div id="right">右列</div>  </body>  </html>

      • 优点：代码结构简单，考虑到了页面优化，中间内容去先加载

      • 缺点：暂时没想到。。

      方法三：使用flex布局

      <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Document</title>  <style> .HolyGrail-body {    display: flex;    flex: 1;  }  .HolyGrail-content {    flex: 1;    background-color: green;  }    .HolyGrail-nav, .HolyGrail-ads {    /* 两个边栏的宽度设为12em */    flex: 0 0 200px;    background-color: blue;  }    .HolyGrail-nav {    /* 导航放到最左边 */    order: -1;    background-color: grey;  }  </style>  </head>  <body>    <div class="HolyGrail-body">      <main class="HolyGrail-content">...</main>      <nav class="HolyGrail-nav">...</nav>      <aside class="HolyGrail-ads">...</aside>    </div>  </body>  </html>

      • 优点：高大上

      • 缺点：仅支持IE11+

      </div>

      来自： http://www.cnblogs.com/depsi/p/5097013.html

      </span></code></code></code></code></code></code></code>

相关经验