Question

我有一个简单的页面。 enter image description here

HTML和CSS如下。

<body>
    <div style="background-color:red;">
        <div style="background-color:green; width:40%; float:left;">
            LEFT
        </div>
        <div style="background-color:blue; width:60%; float:right;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
        </div>      
    </div>

</body>

问题是蓝色div的内容来自php，它导致蓝色div的可变高度。我想要的是让左绿色div的高度与蓝色div的高度相同。我用jquery解决了这个问题，但是我能用html和css实现这个吗？感谢。

Answer 1

不要浮动元素，使用包装器div包装元素，将display: table;分配给包装元素，然后将display: table-cell;分配给嵌套元素，这就是你需要的全部内容实现你想要的......

Demo

.wrap {
    display: table;
    width: 100%;
}

.wrap div.one, div.two {
    display: table-cell;
    width: 50%;
}

.wrap .one {
    background: #f00;
}

.wrap .two {
    background: #0f0;
}

Answer 2

根据您需要支持的浏览器，您可以使用CSS flexbox。

简单示例：

div{
    display: flex;
}

<强> Demo

CSS Flexbox browser support

div的高度等于另一个div

2 个答案: