1

正如标题所说，我需要两个 div 一样高。它们应该尽可能高，以适应内容。当前的CSS是：

.portfolioleft{
    float:left;
    width:189px;
    background-color: #436FAC;
    min-height: 100px;
    height: auto;
    color: #FFF;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.portfolioleft img{
    border-radius: 10px;
}
.portfolioright{
    float:right;
    width:500px;
    background-color: #436FAC;
    min-height: 100px;
    height: auto;
    color: #FFF;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.portfolioright a{
    color:#FFFFFF;
}

div的html是：

<div class="portfolioleft"><img src="img" alt="img" width="189" height="311" /></div>
<div class="portfolioright">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="clear">&nbsp;</div>
4

3 回答 3

1

单靠 CSS 无法解决这一壮举（除非您想要一个可以使用图像的 hack 解决方案）。您将需要实现一个 JS 解决方案。由于内容是动态的，并且您不知道列的高度，因此您需要访问 DOM 以确定最高列的高度，然后将其应用于指定的列。我经常使用以下内容，它工作得很好并且很容易实现。

http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html

于 2012-04-19T19:11:15.893 回答
0

不幸的是，这是 CSS 中的一个棘手问题。如果您只想将左侧边栏的背景颜色扩展到该部分的底部（其高度由右侧 div 定义），请尝试将它们包装在父 div 中（缩放到右侧 div 的高度），然后将左侧 div 定位为 position:absolute 和 100% 的高度，如下所示：

<div class="portfolio">
  <div class="portfolioleft">...</div>
  <div class="portfolioright">...</div>
</div>

.portfolio {
  position: relative;
  background: white;
}

.portfolio .portfolioleft {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background: #436FAC;
}

.portfolio .portfolioright {
  margin-left: 200px;
}

如果两边都是动态的，并且您需要两个高度匹配，那么让它在所有主要浏览器上工作的唯一可靠方法是诉诸基于表格的两列布局，这可能会很糟糕。

于 2012-04-19T18:51:29.460 回答
0

左右 div 中的单元格属性

我检查了您的代码并将浮动替换为显示表格单元格

您可以查看此直播http://jsfiddle.net/rohitazad/prMLh/1/

于 2012-04-20T07:27:28.410 回答