CSS两个相同高度的盒子

Question

我想要的是使右列的高度（以及其中的图像）取决于左侧。左边的高度不断变化，宽度和右列的高度也会发生变化，但它们永远不会相等。

CSS

div.home-bottomleft, div.home-bottomright {
    float:left;
    display:table-row;
    padding:10px 0;
}
div.home-bottomleft {
    width:45.3%;
    background: url(/wp-content/themes/jdesign/images/div-separator.png) right no-repeat;
}
div.home-bottomright {
    width:54.7%;
}

HTML

<div class="home-bottomleft">
<img class="home-bottom-motive" src="/wp-content/themes/jdesign/images/homepage-motive.png" alt="Bottom Top Motive" /></p>
<p class="book_antiqua home-bottomtext">XX Events is a full-service event planning company in Chicago dedicated to creating an enjoyable and stress-free planning experience for our clients. We are motivated by event trends, inspired by traditions, and fascinated by all of the details that go into a personalized and flawless event!</p>
</div>
<div class="home-bottomright">
<div class="home-brbox"><img class="home-brbox-img" src="/wp-content/uploads/2013/05/XXevents-bottomleftimg.jpg" alt="XXevents" /></p>
<p>Weddings</p>
</div>
<div class="home-brbox"><img class="home-brbox-img" src="/wp-content/uploads/2013/05/XXevents-bottommiddleimg.jpg" alt="XXevents" /></p>
<p>Social Events</p>
</div>
<div class="home-brbox"><img class="home-brbox-img" src="/wp-content/uploads/2013/05/XXevents-bottomrightimg.jpg" alt="XXevents" /></p>
<p>Showers</p>
</div>
</div>

Answer 1

所以，你的左栏有不同的高度，你希望左栏确定右栏的高度（我想 - 你的问题并不完全清楚）。

最简单的方法是让左边的元素在流中，右边的元素绝对定位并拉伸到它的容器。

您可以在http://jsfiddle.net/yNKxG/1/

看到此效果

pseduo-HTML示例：

<container>
    <div, width: 50%;></div>
    <div, position: absolute; top: 0; right: 0; bottom: 0; width: 50%;></div>
</container>

请注意，这不包括您在模型中显示的调整大小的文本;必须通过其他方式实现（可能只有JavaScript，除非通过媒体查询断点触发左列高度的变化）。

Answer 2

在父元素中将display:table添加到CSS中;然后在CSS列上添加display:table-cell。