前端队长の技术博客

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

问题描述

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

解决方案

方法一

通过父元素设置 overflow:hidden, 子元素设置超大 padding-bottommargin-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;
}

效果如下图:

参考链接

(完)