方案一：float + margin
<style>
#left1 {
/* 第一列 200 */
width : 200px;
height : 100px;
background-color: greenyellow;
float : left;
}
#right1 {
height : 200px;
background-color: hotpink;
/* 第二列 自适应 */
margin-left : 210px;
}
</style>
<div id="left1"></div>
<div id="right1"></div>
方案二：table 布局
<style>
#parent22 {
display: table;
width : 100%
}
#left22 {
/* 第一列 200 */
width : 200px;
height : 100px; /* 未生效*/
background-color: greenyellow;
display : table-cell;
}
#right22 {
/* 第二列 自适应 */
height : 200px; /* 生效*/
background-color: blue;
display : table-cell
}
</style>
<div id="parent22">
<div id="left22"></div>
<div id="right22"></div>
</div>
方案三：绝对定位
<style>
#parent33 {
position: relative;
height: 210px;
background-color: #eee;
}
#left33 {
/* 第一列 200 */
width : 200px;
height : 100px;
background-color: greenyellow;
position : absolute;
top : 0;
left : 0;
}
#right33 {
height : 200px;
background-color: blue;
position : absolute;
top : 0;
/* 第二列 自适应 */
left : 210px;
right : 0;
}
</style>
<div id="parent33">
<div id="left33"></div>
<div id="right33"></div>
</div>
方案四：flex 弹性盒模型
<style>
#parent44 {
display: flex;
}
#left44 {
/* 第一列 200 */
width : 200px;
height : 100px;
background-color: greenyellow;
}
#right44 {
height : 200px;
background-color: blue;
/* 第二列 自适应 */
flex : 1;
}
</style>
<div id="parent44">
<div id="left44"></div>
<div id="right44"></div>
</div>
方案五：Grid 网格布局
<style>
#parent55 {
display : grid;
/* 第一列 200，第二列 自适应 */
grid-template-columns: 200px auto;
}
#left55 {
height : 200px;
background-color: greenyellow;
}
#right55 {
height : 300px;
background-color: blue;
}
</style>
<div id="parent55">
<div id="left55"></div>
<div id="right55"></div>
</div>
打赏作者
您的打赏是我前进的动力
微信
支付宝
CSS 高级📦 水平居中、垂直居中布局实战套路
上一篇
评论
