Daotin

css实现左右两个div等高

CSS面试

问题描述

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

解决方案

方法一

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

html
<div id="#warp">
    <div class="left">
        <br>
        <br>
        <br>
        left
    </div>
    <div class="right">right</div>
</div>
css
#box {
    overflow: hidden;
    height: 200px;
}
.left,
.right {
    float: left;
    border: 1px solid red;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

方法二

每个div使用display:table-cell

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

方法三

父元素使用display:box

css
.wrap {
    display: -webkit-box;
}
.left,
.right {
    padding: 10px;
    border: 1px solid #f40;
}
注意：一定要加类似-webkit- 兼容性处理。

方法四

使用flex布局。

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

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

效果如下图：

Photo

参考链接

（完）

Related posts