左侧定宽,右侧自适应 常用的四种写法如下,打开对应注释即可。 左中右的双飞翼布局大同小异,可复用。
// css样式
.box{
width: 100%;
height: 100px;
background-color: rgb(15, 56, 42);
/* display: flex; 方法1 */
/* position: relative; 方法2 */
}
.box .left{
width: 200px;
height: 100px;
background-color: rgb(104, 8, 8);
/* float: left; 方法3&4 */
}
.box .right{
/* flex: 1; 方法1 */
/* position: absolute;
top: 0;
left: 200px;
right: 0;
bottom: 0; 方法2 */
/* margin-left: 200px; 方法3 */
/* float: right;
width: calc(100% - 200px); 方法4 */
height: 100px;
background-color: rgb(10, 53, 88);
}
/** html */
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>