使用css3的flex盒模型來實現兩欄佈局（左側固定寬度，右側自適應寬度）

時間 2019-11-09

標籤使用 css3 css flex 模型實現佈局左側固定寬度右側自適應欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<style>  
.parent{
  height:500px;  
  border:1px solid #222;  
  display:flex;/*設爲伸縮容器*/  
  flex-flow:row;/*伸縮項目單行排列*/  
}  
.stable{  
  width:200px;/*固定寬度*/  
  border:1px solid  #ccc;  
  margin:20px;  
}  
.change{  
  flex:1;/*這裏設置爲佔比1，填充滿剩餘空間*/  
  border:1px solid #ff4400;  
  margin:20px;  
}  
</style>  
</head>  
<body>  
  <div class="parent">  
    <div class="stable">stable 固定寬度200px</div>  
    <div class="change">changeable 可變寬度</div>  
  </div>  
</body>  
</html>

附：傳統模式（利用float浮動實現）html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
  .parent{
    height: 500px;
    border:1px solid #222;  
  }
  .stable{
    float: left;
    height: 460px;
    width: 200px;
    border:1px solid  #ccc;  
    margin:20px;  
  }
  .change{
    height: 460px;
    border:1px solid #ff4400;  
    margin:20px 20px 20px 260px;  
  }
</style>
</head>
<body>
  <div class="parent">
    <div class="stable">stable 固定寬度200px</div>
    <div class="change">changeable 可變寬度</div>
  </div>
</body>
</html>

相關標籤/搜索