css布局左侧固定右侧弹性铺满方法总结

作者: 小强不是蟑螂啊 | 来源:发表于2019-04-16 15:34 被阅读0次

css布局左侧固定右侧弹性铺满方法总结
常用网页布局
CSS左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法
左侧固定右侧自适应布局
两栏布局和三栏布局
常见网页布局的介绍
多列布局方案
自适应技巧（一）
前端面试知识准备总结
CSS布局&居中&媒体查询

一共有五种，分别是双浮动-计算两边的宽度，固定栏浮动-右侧margin-left，固定栏采用绝对定位-右侧margin-left，采用flex，设置display:table/table-cell，

<html>

<head>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    /* 第一个方法 calc,两个一起浮动 */
     .nav1 {
         width: 200px;
         background: #ff0000;
         height: 200px;
         float:left;
         display: block
     }
     .aside {
         width: calc( 100% - 200px );
         background: #ffff00;
         height: 200px;
         float:left;
     }

     /* 浮动+margin  */
     .nav1 {
         width: 200px;
         background: #ff0000;
         height: 200px;
         float:left;
         display: block
     }
     .aside {
         margin-left: 200px;
         background: #ffff00;
         height: 200px;
     }
     /* 有边固定蓝采用绝对定位 */
     .nav1 {
         width: 200px;
         background: #ff0000;
         height: 200px;
         position: absolute;
         left: 0;
         top: 0;
         bottom: 0;
     }
     .aside {
         margin-left: 20px;
         width: 100%;
         background: #ffff00;
         height: 200px;
     }
     /* 采用flex  */
     .div {
         display: flex;
     }
     .nav1 {
         width: 200px;
         background: #ff0000;
         height: 200px;
     }
     .aside {
         background: #ffff00;
         height: 200px;
         flex:1;
     }
     /* table-cell */
     .div {
         width: 100%;
         display: table;
     }
     .nav1 {
         display: table-cell;
         height: 200px;
         background: #ff0000;
         width: 200px;
     }
     .aside {
         display: table-cell;
         height: 200px;
         background: #ffff00;
     }
    </style>
</head>

<body>
  <div class="div">
    <nav class="nav1">
        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
        </ul>
    </nav>
    <div class="aside">
        
    </div>
  </div>
</body>
<script>
</script>

</html>