calc()函数在圣杯布局中用法

源自：7-3 圣杯布局的解决方案

calc()函数在圣杯布局中用法

如果不考虑兼容的情况下，发现使用calc()也可以实现同样的效果，和大家分享一下：

提问者：慕粉3959400 2020-01-02 03:10

个回答

慕粉3959400: 2020-01-02 03:16:47

<!--还是左中右的顺序-->
<div class="parent">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

.left, .center, .right {     
    height: 300px;
    float: left;
}        
.left { 
    background-color: red; 
    width: 300px;
}        
.center { 
    background-color: green;
    width: calc(100% - 600px);
}        
.right { 
    background-color: blue;
    width: 300px;        
}