css实现两栏布局

最新推荐文章于 2024-07-12 08:49:29 发布

weixin_30662011

最新推荐文章于 2024-07-12 08:49:29 发布

阅读量181

点赞数

原文链接：http://www.cnblogs.com/CatcherLJ/p/11171729.html

版权

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>

　如果文章对你有帮助，麻烦帮忙点个赞哦！嘿嘿！做一个靠谱的技术博主！

转载于:https://www.cnblogs.com/CatcherLJ/p/11171729.html