                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /一课全面掌握主流CSS布局

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

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

慕粉3959400

2020-01-02

源自：一课全面掌握主流CSS布局 7-3

关注问题我要回答

567

操作

收起

1 回答

慕粉3959400 提问者
2020-01-02

<!--还是左中右的顺序-->
<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;        
}