                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /一課全面掌握主流CSS布局

calc()函數(shù)在圣杯布局中用法

如果不考慮兼容的情況下，發(fā)現(xiàn)使用calc()也可以實現(xiàn)同樣的效果，和大家分享一下：

慕粉3959400

2020-01-02

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

關注問題我要回答

581

操作

收起

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;????????
}