1.浮动
<div class="left "></div>
<div class="right "></div>
<div class="center"></div>
.left{ float: left; 300px; background: red; height: 100px; } .right{ float: right; 300px; background: pink; height: 100px; } .center{ background: yellow; height: 100px; }
中间盒子放最后,不然占位了右边盒子就到下面去了
2.定位
dom位置随便
.left{ position: absolute; left: 0; 300px; background: red; height: 100px; } .right{ position: absolute; right: 0; 300px; background: pink; height: 100px; } .center{ position: absolute; margin: 0 300px; background: yellow; height: 100px; }
3.flex
<div class="father"> <div class="left "></div> <div class="center "></div> <div class="right"></div> </div> .father{ height: 100px; display: flex; } .left{ 300px; background: red; height: 100px; } .right{ 300px; background: pink; height: 100px; } .center{ flex: 1; background: yellow; height: 100px; }
4.table布局
<div class="father"> <div class="left "></div> <div class="center "></div> <div class="right"></div> </div>
.father{ height: 100px; display: table; 100%; } .father>div{ display: table-cell; } .left{ 300px; background: red; } .right{ 300px; background: pink; } .center{ background: yellow; }
5.grid布局
.father{ height: 100px; display: grid; 100%; grid-template-rows:100px; grid-template-columns:300px auto 300px; }
.left{
background: red;
}
.right{
background: pink;
}
.center{
background: yellow;
}
当内容超出高度时
只有flex和table布局可以自适应
浮动的会到左边,因为左边没有了浮动
定位的直接向下,因为设置了左右位置
grid是字超出,盒子不变
转自:https://blog.csdn.net/weixin_42734433/article/details/82935761