兩列布局

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。