两栏式布局

说明：结构比较简单，为了方便，我把结构再拿出来一下

   <div class="box">
       <div class="list">
          200宽的左侧
       </div>
       <div class="content">
           宽度自适应布局
       </div>
   
   </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- 方式一：混合浮动+普通流
    思路： 
    浮动元素可以让块级元素显示在同一列，但是浮动元素在没有设置宽度的时候，宽度是有内容来撑开的。
    所以左边的元素添加浮动之后，给200px的宽度，右边需要铺满整屏的元素就不用加浮动了
    但，由于浮动元素会脱离文档流，所以右边的元素如果是块元素的话，会撑满整行，所以在这里给右边的元素添加一个margin-left给200px的值就可以的。（不加margin值，看上去没有什么问题，但是宽度是不一样的）

<style>

    .box{
        height: 600px;
        border: 1px solid #000;
    }
    .list{
        float: left;
        width: 200px;
        height: 100%;
        background: tan;
    }
    .content{
        margin-left: 200px;
        background: pink;
        height: 100%; 
    }
</style>
-->

<!-- 方式二：flex布局
    思路： 给父级元素添加flex之后，可以让子元素排列在一行，
    左侧的给定宽度，给右边的元素添加flex：1就好，这里flex：1表示把剩余的空间占满
    <style>

        .box{
            height: 600px;
            border: 1px solid #000;
            display: flex;

        }
        .list{
            width: 200px;
            height: 100%;
            background: tan;
        }
        .content{
            flex:1;
            background: pink;
            height: 100%; 
        }
       
    </style>
 -->

<!-- 方式三：grid布局
思路：给父容器设置grid值之后，再利用grid-template-colums来给子元素设置宽度即可，
<style>

        .box{
            height: 600px;
            border: 1px solid #000;
            display: grid;
            grid-template-columns: 200px auto;
            /* 或者  grid-template-columns: 200px 1fr;*/

        }
        .list{
            height: 100%;
            background: tan;
        }
        .content{
            background: pink;
            height: 100%; 
        }
       
    </style>
 -->

 <!-- 方式四：浮动+BFC
    思路：左侧浮动，让元素在一行排列，右侧内容设置overflow：auto，形成BFC，形成独立区域，达到效果。
    <style>

        .box{
            height: 600px;
            border: 1px solid #000;
          

        }
        .list{
            width: 200px;
            height: 100%;
            background: tan;
            float: left;
        }
        .content{
            background: pink;
            height: 100%; 
            overflow: auto;
        }
 -->
 
 <!-- 方法五：定位+margin
思路： 
给父级一个相对定位，给左侧固定200宽的元素添加一个绝对定位，这样这个元素就贴着父级左侧了，
右侧的块元素让其宽度自动撑满，然后给一个margin-left即可
<style>

        .box{
            height: 600px;
            border: 1px solid #000;
            position: relative;
          

        }
        .list{
            width: 200px;
            height: 100%;
            background: tan;
            position: absolute;
            left: 0;
        }
        .content{
            background: pink;
            height: 100%; 
            margin-left: 200px;
        }
       
    </style>
 -->
 
 <!-- 方法六：dispaly:table
    思路：对dispaly:table这个属性理解得比较浅，可以参考张鑫旭老师的文章https://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/
    <style>

        .box{
            height: 600px;
            border: 1px solid #000;
            display: table;
          

        }
        .list{
            min-width: 200px;
            height: 100%;
            background: tan;
            display: table-cell;
        }
        .content{
            background: pink;
            height: 100%; 
            width: 100%;
            display: table-cell;
        }
       
    </style>
 -->
 <style>

        .box{
            height: 600px;
            border: 1px solid #000;
            display: table;
          

        }
        .list{
            min-width: 200px;
            height: 100%;
            background: tan;
            display: table-cell;
        }
        .content{
            background: pink;
            height: 100%; 
            width: 100%;
            display: table-cell;
        }
       
    </style>
<body>
    <div class="box">
        <div class="list">
           200宽的左侧
        </div>
        <div class="content">
            宽度自适应布局
        </div>
    
    </div>
    
</body>
</html>

猜你喜欢