探索CSS等高布局的第二种方法

发表时间: 2024-05-01 10:14

<div class="parent"><div class="left"></div><div class="right"></div></div>

通过以下 CSS 代码实现等高布局效果:

.parent{overflow: hidden;}.left, .right{padding-bottom: 9999px;margin-bottom:-9999px;}.left{width: 100px;float:left;}.right{overflow:hidden;}

伪等高布局

第二种解决方案实现的不是真正的等高布局, 只是视觉上等高的伪等高布局

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>等高布局的第二种解决方案</title><style>#parent {    overflow: hidden;}#left,#right {    width: 300px;    float: left;    padding-bottom: 9999px;    margin-bottom: -9999px;}#left {    background-color: #c9394a;}#right {    background-color: #cccccc;}</style></head><body><div id="parent"><div id="left">伪等高布局</div><div id="right">第二种解决方案实现的不是真正的等高布局, 只是视觉上等高的伪等高布局.................</div></div></body></html>

探索CSS等高布局的第二种方法

热门阅读

推荐阅读