多列等高布局

来源：互联网发布：怎样制作淘宝优惠券编辑：程序博客网时间：2024/04/26 17:48

多列布局—等高

需求：当两列的内容变化时，要保证内容相同，且和较长的那列相同。

<!DOCTYPE html><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>测试专用</title>    <style type="text/css">        *{margin: 0;padding: 0;}        .parent{border:1px solid black;color: #fff;}        .left{width: 80px; background: black;}        .right{background: gray;}    </style></head><body>    <div class="parent">        <div class="left">            <p>left</p>        </div>        <div class="right">            <p>right</p>            <p>right</p>        </div>    </div></body></html>

解决方案一：table

同一行的表格单元格都是等高的所以可以解决这个问题

.parent{display:table;width:100%;table-layout:fixed;height: 100%;}.left,.right{display:table-cell;}.left{width:80px;padding-right:20px;background-clip: content-box;}.left p{height: 100%;}/*扩充内容，可以尝试一下没有这条语句是什么效果*/

在“等高”的table方案中，使用padding-right的方案来处理间距会存在部分兼容问题。

问题表现：
在webkit和ie内核中会有这个问题，而firefox正常。从表现上看，似乎chrome等浏览器无故多出了其他padding，如padding-bottom，从而导致了用background-clip:content-box来裁剪背景后背景没有等高的问题。
问题解决：
1. 方案1，为parent增加上属性 height: 100%;正如上面的代码处理一样，可以试试去掉这个属性的效果。
2. 方案2，我们可以去掉padding-right的设置，变成border-right:20px solid transparent，然后把background-clilp改成padding-box，问题就解决了。

解决方案二：flex

由于flex的align-items的默认值是stretch，所以可以拉伸至等高

.parent{display:flex;}.left{mergin-right:10px;}.right{flex:1;}

解决方案三：float

float没有天然的属性可以满足等高，同时我们知道填充背景色会包括padding，所以我们先用padding扩张，然后用margin收缩

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

这样的等高是伪等高，实际上只是背景色填充区域的高度相同。

阅读全文

0 0