两列自适应布局

Posted on

1. float+margin

左列：float:left; width:100px;
右列: margin-left:100px

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .left {
        float: left;
        width: 100px;
        background: red;
    }
    .main {
        margin-left: 110px;
        width: 100%; /*可以不加*/
        background: green;
    }
    </style>
</head>
<body>
    <div class="left">这是左栏</div>
    <div class="main">这是右栏</div>
</body>

</html>

缺点：如果想修改.left的宽度，还需要修改.main 的margin-left。

2. float+overflow:hidden(触发BFC)

左列： float:left; width: 100px;
右列: overflow:hidden;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .left {
        float: left;
        width: 100px;
        background: red;
    }
    .main {
        overflow: hidden; /*不能加width:100%;*/
        background: green;
    }
    </style>
</head>
<body>
    <div class="left">这是左栏</div>
    <div class="main">这是右栏</div>
</body>

</html>

优点：可以设置浮动的margin来控制间距，想要修改宽度时只修改宽度就行了

3. 绝对定位

左列：float:left;
右列: 绝对应为left

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .left {
        float: left;
        /* position: relative; */
        width: 100px;
        background: red;
    }

    .main {
        position: absolute;
        left: 100px;
        width: 100%;
        background: green;
    }
    </style>
</head>

<body>
    <div class="left">这是左栏</div>
    <div class="main">这是右栏</div>
</body>

</html>

4. flex布局

不多说。

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .wrapper {
      display: flex;
    }
    .left {
        flex: 0 1 100px;
        background: red;
    }

    .main {
        flex: 1;
        background: green;
    }
    </style>
</head>

<body>
  <div class="wrapper">
    <div class="left">这是左栏</div>
    <div class="main">这是右栏</div>
  </div> 
</body>

</html>

5. 让重要内容先渲染

右列：float:left; width: 100%;
左列： display: inline-block; margin-left: -100%;width:100px;

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .main-wrapper {
      margin-left: 100px;
    }
    .left {
        margin-left: -100%;
        display: inline-block; /*或者float: left;*/
        width: 100px;
        background: red;
    }

    .main {
        float: left;
        width: 100%;
        background: green;
    }
    </style>
</head>

<body>
    <div class="main-wrapper">
      <div class="main">这是右栏</div>
    </div>
    <div class="left">这是左栏</div>
</body>

</html>