使浮动div的高度相同 [英] Make floating divs the same height

问题描述

我有两个并排的div。我不知道他们的高度，它根据内容改变。有没有办法确保他们总是相同的高度，即使他们中的一个伸展，只有CSS？

I have 2 divs side by side. I don't know the height of them upfront, it changed according to the content. Is there a way to make sure they will always be the same height, even when one of them stretches, only with CSS?

我做了一个小提琴来显示。我想让红色和蓝色的div是相同的高度...

I made a fiddle to show. I want the red and blue divs to be the same height...

http：/ /jsfiddle.net/7RVh4/

这是css：

#wrapper {
width: 300px;
}
#left {
    width:50px;
    background: blue;
    float:left;
    height: 100%;  /* sadly, this doesn't work... */
}
#right {
    width:250px;
    background: red;
    float:left;
}

推荐答案

float，使用 display：table-cell 。你可能会发现一些旧的浏览器不理解这条规则。见下面：

You could try instead of using float, use display: table-cell. You might find some older browsers don't understand this rule however. See below:

#wrapper {
    display: table; // See FelipeAls comment below
    width: 300px;
}

#left {
    display: table-cell;
    width: 50px;
    background: blue;
}

#right {
    display: table-cell;
    width: 250px;
    background: red;
}

这篇关于使浮动div的高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！