首页 > 代码库 > 两列布局

两列布局

    很多网站都使用了两列布局,就是左边固定,右边自适应的布局。两列布局有多种方法,现在来列举一下

    第一种:margin + float /   margin + absolute

         将左边设置 float 或者 absolute ,使其脱离文档流,右边使用margin-left设置左右间隔,大小一般为 >= 左边的宽度,因为是块级元素,所以右边可以充满剩余的屏幕,这样就实现了左边固定,右边自适应的效果。

        代码如下:

技术分享
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>twoList layout</title>
    <style type="text/css">
        .left{
          /*float:left;*/
          position:absolute;
          width:200px;
          height:30px;
          background-color:red;
        }
        .right{
          height:30px;
          background-color:blue;
          margin-left:220px;
        }
    </style>
</head>
<body>
   <div class="left"></div>
   <div class="right"></div>
</body>
</html>
View Code

       效果如下:

技术分享

   第二种:float +  margin +calc()

         将左右都设置向左浮动,左边使用margin-right来设置左右间隔,右边的宽度设置为calc(100% - (left-width + margin-right))

         代码如下:

技术分享
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>twoList layout</title>
    <style type="text/css">
        .left{
          float:left;
          width:200px;
          height:30px;
          background-color:red;
          margin-right:20px;
        }
        .right{
          float:left;
          height:30px;
          background-color:blue;
          width:calc(100% - 220px);
        }
    </style>
</head>
<body>
   <div class="left"></div>
   <div class="right"></div>
</body>
</html>
View Code

   第三种:float + overflow + margin

          左边设置float,右边清除浮动就可以显示两列布局了, 使用margin来设置左右间隔,可以在左边设置margin-right来设置左右间隔,也可以在右边设置margin-left来设置左右间隔,值得注意的是若是右边使用margin-left来设置间隔时,需要算上左边的宽度

          代码如下:

技术分享
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>twoList layout</title>
    <style type="text/css">
        .left{
          float:left;
          width:200px;
          height:30px;
          background-color:red;
          /*margin-right:20px;*/
        }
        .right{
          height:30px;
          background-color:yellow;
          overflow:hidden;
          margin-left:220px;
        }
    </style>
</head>
<body>
   <div class="left"></div>
   <div class="right"></div>
</body>
</html>
View Code

        

 

两列布局