实现圣杯布局的三种方法

第一题:实现左边固定200px，左右自适应布局的方法(圣杯布局)

用flex布局方式
把左边的框度写死，右边的设置flex:1

<!--外层框架-->
<div class="box">   
 <div class="left">左边</div>   
  <div class="right">右边</div>
  </div>
  <div class="footer"></div>

<style>
.box{  
  height:200px; 
   width:600px;
   display:flex; 
   }
 .left{
  width:200px;
  height:200px; 
 }
 .right{
   height:200px;
   flex:1;
 }
</style>

2.## Css3新盒子模型给左边一个200px的padding
道理和代码同上，就是把rigt 的盒子模型给为display:border-box 宽度不设置
3.## 普通盒子模型，但是子盒子不设置框度，加浮动实现给左边一个200px的margin
首先创建一个大的div盒子，起类名为bix,它含有两个子div盒子，一个类名为left ,一个为right
然后底部区域清除浮动，防止跟随上边的区域一起浮动。
把右边的来名为right的浮动设置框度为100%

<!--外层框架-->
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
<div class="footer"></div>

<style>
// css样式
.box{  
  height:200px;
  width:600px;
  padding-left:200px; 
  }
  .footer{
   clear:both;
  }
 .left{
  width:200px;
  height:200px;
  float:left;
 }
 .right{
  width:100%;
  height:200px;
 }
  
  </style>

grid网格(考虑浏览器兼容问题)，


<style>

.box{
  height:200px;
  width:600px;
  display:grid;
  grid-template-columns: 200px auto ;
  }
</style>

来源：CSDN

作者：qq_44984407

链接：https://blog.csdn.net/qq_44984407/article/details/104030935

标签

class

实现圣杯布局的三种方法

用flex布局方式