阅读背景:

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



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: