方案一：table 布局
<style>
#parent11 {
display: table;
}
#left11 {
background-color: gold;
display : table-cell;
}
#right11 {
background-color: blue;
display : table-cell
}
</style>
<div id="parent11">
<div id="left11">hello</div>
<div id="right11">
Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change ? Whatever is worth doing is worth doing well.
</div>
</div>
hello
Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change ? Whatever is worth doing is worth doing well.
方案二：margin + padding 实现
<style>
#parent22 {
/* 超出隐藏 */
overflow: hidden;
}
#parent22 > div {
float: left;
}
#left22 {
width : 20%;
background-color: gold;
/* 正负抵消 */
padding-bottom : 9999px;
margin-bottom : -9999px;
}
#right22 {
width : 80%;
background-color: blue;
padding-bottom : 9999px;
margin-bottom : -9999px;
}
</style>
<div id="parent22">
<div id="left22">hello</div>
<div id="right22">
Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change ? Whatever is worth doing is worth doing well.
</div>
</div>
hello
Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change ? Whatever is worth doing is worth doing well.
方案三：flex 实现
<style>
#parent33 {
/* 超出隐藏 */
overflow: hidden;
display: flex;
}
#parent33>div {
float: left;
flex: 1;
}
#left33 {
width: 20%;
background-color: gold;
}
#right33 {
width: 80%;
background-color: blue;
}
</style>
<div id="parent33">
<div id="left33">hello</div>
<div id="right33">
Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change ? Whatever is worth doing is worth doing well.
</div>
</div>
hello
Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to change ? Whatever is worth doing is worth doing well.
打赏作者
您的打赏是我前进的动力
微信
支付宝
CSS 高级📦 等分布局实战套路
上一篇
评论
