龙喵专栏 /前端 /内容

网页实现两个div左右并排等高布局的5种方法

网页左右两列等高布局的5种实现方法

两列或多列布局的方法有很多,目前来说,浮动的方式用的比较多,例如下面这个就是典型的两列布局,父容器宽度为600px,左右两列分别为400px和200px,未设置具体的高度:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
p,ul,li {margin:20px;padding:0;}
#all {width:600px;overflow:hidden;}
#main {width:400px;background-color:#aeb;float:left;}
#side {width:200px;background-color:#feb;float:left;}
</style>
</head>
<body>
<div id="all">
 <div id="main">
   <p>洛杉矶(Los Angeles)位于美国加利福尼亚州西南部,是加州第一大城市,被称为“天使之城”。</p>
 </div>
 <div id="side">
   <ul>
    <li>迪士尼度假区</li>
    <li>比弗利山庄</li>
    <li>洛杉矶国际机场</li>
    <li>圣费尔南多谷</li>
   </ul>
 </div>
</div>
</body>
</html>

为了便于观察,这里给左右两列设置了不同的背景,目前的效果是这样的:左右两列并排等高

在没指定高度的情况下,左右两侧的区块高度会以内容的多少而变化,这并不是大家想要的结果,多数人希望的效果应该是下面这样:左右两列并排等高

上面的效果是左右两列的高度以较高的那一列为准保持一致,一般被称为“等高布局”,实现等高布局可以有多种思路:

1.并排等高布局方法

网上流传较广的方法是给左右两列都加上这样一段样式:

margin-bottom:-10000px;padding-bottom:10000px;

将列区块设置了一个较大的底部内边距,再设置绝对值相等的外边距负值,在父容器设置了溢出隐藏的情况下,左右任意一列的高度增加,父容器的高度就被撑到相应的高度,较低的那一列便会使用内边距补偿这一高度差,同时因为背景是包含内边距的,所以这样就间接实现了等高布局的效果。不过这种方法代码看上去有点怪怪的,而且会导致区块边框不能正常显示,因此实际运用的并不多。

2.并排等高布局方法

如果将两列的背景颜色做成一张图片,设置为父容器的背景图并定义在y轴方向上平铺,在视觉上也是左右两列等高的效果:

#all {width:600px;overflow:hidden;background-image:url(bg.png) repeat-y;}

理论上是没有问题的,但这样会无故增加了一次文件请求,虽然这个图片并不是很大,但是完美主义者可能并不喜欢这个方法,如果不想有这个文件请求,相信通过渐变生成背景图片是个好办法:

#all {background-image:linear-gradient(to right,#aeb 400px,#feb 400px);}

使用背景平铺的方法在视觉上实现了高度自适应,但实际上区块的高度并没有改变,如果给区块加上底边框就会看出来:

左右两列并排等高

3.并排等高布局方法

如果使用表格布局的话,这个问题就不是问题,可问题是表格并不建议用于网页布局,不过可以通过CSS将元素块模拟为表格:

#all {width:600px;overflow:hidden;display:table;}
#main, #side {display:table-cell;}

这里将父容器模拟为表格,将左右两列模拟为单元格,然后去掉浮动定义,就简单的实现了高度自适应的布局了,边框也可以正常显示:

左右两列并排等高

4.并排等高布局方法

CSS3新增的弹性布局方式display:flex十分强大,在本例中,只需将父元素增加该定义:

#all {width:600px;display:flex;}

给父元素增加该定义后,“两列布局”和“等高”这两件事都被它实现了,也无需再设置浮动,更不需要清除浮动,这是代码量最少的方式。

5.jQuery并排等高布局方法

使用jQuery方式获取两列中较高列的高度值,并将两列的高度设置为该值,也可轻松的实现两列等高,无需在CSS里增加其他的定义,也是一个不错的选择:

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var m = Math.max(
  $('#main').height(),
  $('#side').height()
);
  $('#all div').height(m);
})
</script>

以上多种方法供参考测试,不足的地方欢迎留言讨论

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:http://ailongmiao.com/read/546.html

[ web前端导航 ]:http://ailongmiao.com/web/

评论

继续阅读

GET和POST的区别

Web前端 2019-03-11 2

最近看了一些同学的面经,发现无论什么技术岗位,还是会问到 get 和 post 的区别?让我们先看一下标准答案长什么样子 w3school: GET

彻底解决滚动穿透方案

Web前端 2019-02-15 4

有一层遮罩蒙层覆盖在body上时,当我们滚动遮罩层,它下面的内容也会跟着一起滚动,看起来好像是上面的滚动事件穿透到下面的DOM元素上

  选择打赏方式

打赏

打赏