css實現兩欄布局


1、flex盒模型:左邊固定寬度,右邊自適應寬度

<!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;
  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>

2、傳統模式:左邊div向左浮動,右邊div使用margin-left把左邊div的位置留出來

<!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>

 如果文章對你有幫助,麻煩幫忙點個贊哦!嘿嘿!做一個靠譜的技術博主!


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com