1

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

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>

4

2 回答 2

2

在父元素中添加display:table到您的 CSS；然后在您的 CSS 列上添加display:table-cell.

于 2013-05-18T19:36:22.037 回答
2

因此，您有一个高度不同的左列，并且您希望右列的高度由左侧确定（我认为 - 您的问题并不完全清楚）。

最简单的方法是让左侧元素流动，而右侧元素绝对定位并拉伸到其容器。

您可以在以下位置看到此效果：http: //jsfiddle.net/yNKxG/1/

伪 HTML 示例：

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

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

于 2013-05-18T19:18:26.443 回答