如何让并列的div高度自适应

Question

<div>

<div>***</div>
<div>***</div>
<div>***</div>
<div>***</div>
<div>***</div>

</div>

如下图这样：

我目前根据的是 display的table属性来写的。
但是没法设置宽度。

Answer 1

可以尝试将卡片分成上下两层，底层包含红色边框，利用 absolute 的两个特性让其保持底部（不声明 left 将默认在 static position，让父元素 position 保持 static 使其不作为 position container）。

Proof of concept 思路供参考：

https://codepen.io/straybugs/...

Answer 2

 .c-box{
            width: 400px;
            margin: 0 auto;
            overflow: hidden;
        }
        .c-left{
            background: #ccc;
        }
        .c-right{
            background: #f3f3f3;
        }
        .c-left,.c-right{
            margin-bottom: -9999px;
            padding-bottom: 9999px;
            width: 200px;
            float: left;
        }
     <div class="c-box">
        <div class="c-left">
            <p>fdsfdsf</p>
            <p>fdsfdsf</p>
            <p>fdsfdsf</p>
            <p>fdsfdsf</p>
            <p>fdsfdsf</p>
        </div>
        <div class="c-right">
            <p>fsdfsdf</p>
        </div>
    </div>

张鑫旭大大的方法 兼容性很好 可以试一下

Answer 3

使用flex布局吧

Answer 4

给里面的div设置一个百分比的高度就可以根据父级元素的高度自适应了。