当前位置：网站首页>display-inline+calc实现左中右布局，中间自适应

display-inline+calc实现左中右布局，中间自适应

2022-07-26 10:38:00 【songywaa】 

.box {
    
clear: both;
    /* 干掉间隙 */
    font-size: 0
}

.left {
    
    display: inline-block;
    width: 200px;
    font-size: 16px;
    background-color: #0000FF;
}

.right {
    
    display: inline-block;
    width: 200px;
    font-size: 16px;
    background-color: aqua;
}

.center {
    
    display: inline-block;
    width: calc(100% - 400px);
    font-size: 16px;
    background-color: aquamarine;
}

<div class="box">
	<div class="left">我是左边</div>
    <div class="center">我是中间</div>
    <div class="right">我是右边</div>
</div>
原网站

版权声明
本文为[songywaa]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_42288182/article/details/103076918

边栏推荐

猜你喜欢

随机推荐