两列等高的CSS完成编码

2021-01-20 12:40 jianzhan

甚么是等高合理布局?

先看来1个实例:

 

上图中的网页页面的行为主体內容是多列构造,左列是用来导航栏的,右列是用来显示信息內容的。大家看到它们有1个相互的边框,正中间也有1条隔开线,上下多列的高宽比全是不固定不动的。这类状况下就必须多列的高宽比维持1致了,左侧高宽比提升,右侧也跟随提升,右侧高宽比提升,左侧一样也要提升,不然就会出現“断层”的实际效果。在这里,等高合理布局是以便维护保养边框线条的详细性,在一些地区则将会是以便维护保养情况的详细性,做到总体1致不缺少的实际效果。

合理布局计划方案

等高合理布局有几种不一样的方式,但现阶段为止我觉得访问器适配最好是最简单的应当是padding赔偿法。最先把列的padding-bottom设为1个充足大的值,再把列的margin-bottom设1个与前面的padding-bottom的恰逢抵消消的负值,父器皿设定超过掩藏,这模样父器皿的高宽比就還是它里边的列沒有设置padding-bottom时的高宽比,当它里边的任1列高宽比提升了,则父器皿的高宽比被撑到它里边最高那列的高宽比,别的比这列矮的列则会用它们的padding-bottom来赔偿这一部分高宽比差。由于情况是能够用在padding占有的室内空间里的,并且边框也是追随padding转变的,因此就取得成功的进行了1个障眼法。

编码

先看来下沒有等高合理布局的状况

实际效果:

随后大家运用等高合理布局:

实际效果以下:

在开展实际实际操作的情况下,padding-bottom的值尺寸取决于你的新项目的具体状况,假如不确定性,设大1点也没有谓。

最后的编码:


拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf⑻" />
<title>高宽比自融入合理布局</title>
<style>
body{ padding:0; margin:0; color:#f00;}
.container{ margin:0 auto; width:600px; border:3px solid #00C;
overflow:hidden; /*这个超过掩藏的申明在IE6里不写也是能够的*/
}
.left{ float:left; width:150px; background:#B0B0B0;
padding-bottom:2000px;
margin-bottom:⑵000px;
}
.right{ float:left; width:450px; background:#6CC;
padding-bottom:2000px;
margin-bottom:⑵000px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是left</div>
<div class="right">我是right

如今我的高宽比比left高,但left用它的padding-bottom赔偿了这一部分高宽比</div>
<div style="clear:both"></div>
</div>
</body>
</html>