两列布局

时间 2019-12-07

标签布局繁體版

原文原文链接

两列布局，左侧固定，右侧自适应的三种经常使用方法html

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列布局</title>
    <style>
        /*方法1：流体布局。左元素float,右元素margin-left或者overflow*/
        .one {
            float: left;
            height: 100px;
            width: 300px;
            background-color: blue;
        }
        .two {
            overflow: auto; /*hidden*/
            /*margin-left: 300px;*/
            height: 200px;
            background-color: red;
        }

        /*方法2：绝对定位布局。左元素absolute,右元素同上造成BFC*/
        /* .one {
            position: absolute;
            height: 100px;
            width: 300px;
            background: blue;
            left: 0;
        }
        .two {
            overflow: auto;
            height: 100px;
            width: 100%;
            background: red;
        } */

        /*方法3：flex布局。父元素flex，右元素给定flex的值*/
        /*body{
            display: flex;
        }
        .one {
            height: 100px;
            width: 300px;
    　　　　 background-color: blue;
        }
        .two {
            flex:1;
    　　　　 background-color: red;
            height: 200px;
        }*/
    </style>

</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

若是下方再加一个元素，对于方法1和3没什么影响，对于flex布局须要把元素1和2放在一个div里布局

 
   <!DOCTYPE> 
  
   <html lang="en"> 
  
   <head> 
  
    <meta charset="UTF-8"> 
  
    <title>Document</title> 
  
    <style> 
  
    .top{ 
  
    　　display: flex; 
  
    　　flex-direction: row; 
  
    } 
  
    .one { 
  
    　　height: 100px; 
  
    　　width: 300px; 
  
   　　 background-color: blue; 
  
    } 
  
    .two { 
  
   　　 flex: 1; 
  
   　　 height: 200px; 
  
   　　 background-color: red; 
  
    } 
  
    .three{ 
  
   　　 height: 100px; 
  
    　　background-color: yellow; 
  
    } 
  
    </style> 
  
   </head> 
  
   <body> 
  
   　　 <div class="top"> 
  
   　　　　 <div class="one"></div> 
  
   　　　　 <div class="two"></div> 
  
   　　 </div> 
  
    　　<div class="three"></div> 
  
   </body> 
  
   </html>