前端队长の技术博客

1. 问题描述
2. 解决方案
   1. 方法一
   2. 方法二
   3. 方法三
   4. 方法四
3. 效果如下图：
4. 参考链接

问题描述

现在有两个div，但是两个div里面内容多少不确定，可能左边多，可能右边多，css要如何设置可以保证左右两边的div等高呢？

解决方案

方法一

通过父元素设置 overflow:hidden, 子元素设置超大 padding-bottom 和 margin-bottom来实现。

<div id="#warp">
    <div class="left">
        <br>
        <br>
        <br>
        left
    </div>
    <div class="right">right</div>
</div>

#box {
    overflow: hidden;
    height: 200px;
}
.left,
.right {
    float: left;
    border: 1px solid red;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

方法二

每个div使用display:table-cell

.left,
.right {
    padding: 10px;
    display: table-cell;
    border: 1px solid #f40;
}

方法三

父元素使用display:box

.wrap {
    display: -webkit-box;
}
.left,
.right {
    padding: 10px;
    border: 1px solid #f40;
}

注意：一定要加类似-webkit- 兼容性处理。

方法四

使用flex布局。

flex-direction 属性定义的主轴方向， 默认值为row， 水平展示。 align-item属性定义子项在flex容器的当前行的侧轴方向的对齐方式， 默认为stretch，元素被拉伸以适应容器。

.wrap {
    display: flex;
}
.left,
.right {
    flex: 1;
}

效果如下图：

参考链接

• https://www.cnblogs.com/cbza/p/7145384.html

（完）

This site is open source. Improve this page.