说明
这里的多列等高&＃xff0c;是指列高由内容决定&＃xff0c;所以是不确定的
1. padding和margin正负相抵
利用padding-bottom|margin-bottom正负值相抵
//html
现在我的高度比left高&＃xff0c;但left用它的padding-bottom补偿了这部分高度
.container{ margin:0 auto; width:600px; border:3px solid #00C;overflow:hidden; //这个不能少
}
.left{ float:left; width:150px; background:#B0B0B0;padding-bottom:2000px;margin-bottom:-2000px;
}
.right{ float:left; width:450px; background:#6CC;padding-bottom:2000px;margin-bottom:-2000px;
}
2. flex布局
//html同上
现在我的高度比left高&＃xff0c;但left用它的padding-bottom补偿了这部分高度
//css
.container{ margin:0 auto; width:600px; border:3px solid #00C;display: flex;align-items: stretch;
}
.left{width:150px; background:#B0B0B0;
}
.right{ width:450px; background:#6CC;
}align-items: stretch;若未指定高度&＃xff0c;则子容器占满父容器高度
京公网安备 11010802041100号