将响应div高度设置为等于其兄弟 [英] Set responsive div height to equal its sibling

问题描述

我有两个div，其宽度由百分比控制。我希望正确的div与left div一样高，它根据它包含的图像宽度和浏览器窗口的宽度进行扩展和缩小。

I have two divs whose widths are controlled by percentages. I want the right div to be exactly as tall as the left div, which expands and shrinks based on the width of the image it contains and the width of the browser window.

有没有办法在没有javascript的情况下完成此操作？

Is there a way to accomplish this without javascript?

http://jsfiddle.net/5JU2t/

推荐答案

实现这一目标的最简单方法是使 .right div绝对定位并设置 top 和 bottom 到 0 。

The simplest way to achieve this is to make the .right div absolutely positioned and setting top and bottom to 0.

请记住定位父母（ .main ）div相对并删除所有浮点数：

Just remember to position the parent (.main) div relatively and remove all of the floats:

.right {
    bottom:0;
    position: absolute;
    right:0; 
    top: 0;
}

.main {
    position: relative;
}

工作示例： http://jsfiddle.net/5JU2t/1/

示例中右栏较长的原因是由于图像下方添加了空白区域。如果您只使用此列中的图像，则可以将 float：left 添加到图像中以解决此问题：

The reason the right column is a little longer in the example is due to the white space added under an image. Should you only be using an image in this column then you can add float: left to the image to resolve this:

工作示例： http://jsfiddle.net/5JU2t/2/

这篇关于将响应div高度设置为等于其兄弟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！