CSS相同高度的两个盒子

我想要的只是让右列的高度（和图像）依赖于左边。离开高度不断变化的基础上，宽度和右列的高度变化，但他们永远不会相等。CSS相同高度的两个盒子

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>

来源

2013-05-18 user2330327

左边的身高一直基于宽度和右列的高度变化也发生了变化，但他们从来都不等于那么，什么是45.3％和右54.7％，左 – underscore

什么ü想成为平等的吗？ – underscore

45.3和54.7是这样的，中间的分隔符对应于页面的特定部分并且看起来有组织 – user2330327

所以，你有不同的高度，左边一列，并且希望在右列的高度被确定左（我认为 - 你的问题并不完全清楚）。

做到这一点，最简单的方法是在流动左元素和右元素绝对定位，并延伸到它的容器。

你可以看到这个效果：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，除非通过媒体查询断点触发左列的高度变化）。

来源

2013-05-18 19:18:26

我不知道如何将这个应用到我的案例中。 – user2330327

在父元素添加display:table你的CSS;然后在你的CSS列添加display:table-cell。

来源

2013-05-18 19:36:22 Qristhal

并没有真正帮助.. – user2330327

CSS相同高度的两个盒子

回答

相关问题