html - CSS block 具有不同图像高度的相同高度

Question

我在设计新闻文章的样式时遇到了一些问题。这是我想要的预览: 在左边你总是有一个图像(宽度总是相同的，高度不是)。在右侧，您有一些信息和底部与图像对齐的按钮。

<div id="newsItemImage">
    <img src="" alt="" />
</div>
<div id="newsItemOther">
    <p></p>
    <button></button>
</div>

在两个 div 上向左浮动。但是两个 div 的高度不一样。我怎样才能使它们相等？

这是我现在拥有的:

.newsItemPic
{
    width:333px;
    border:1px solid black;
    float:left;
    height:100%;
}
.newsItemOther{
    width:860px;
    border:1px solid red;
    float:left;
    height:100%;
}

它们彼此相邻，但正确的内容与图像的高度不同。因此，本应位于下方的图像出现在内容下方。

JSFIDDLE:http://jsfiddle.net/ZhD9Z/

Answer 1

Fiddle

由于图像没有响应并且它有 200px 的绝对宽度，我创建了一个容器 width:500px; 然后 righttext 必须包含按钮本身，但按钮必须与图像底部的宽度对齐，因此 righttext 高度等于图像高度，按钮位于底部:0

.eachNewsBox
{
    padding:10px;
    width:500px;
    background-color:gray;
    display:block;
    float:left;
    margin-top:20px;

}

.imgbox
{
    display:block;
    float:left;
    height:100%;
    position: relative;

}

.imgbox img
{
    max-width:200px;
    border:1px solid #000;
    float: left;
}

.button
{
    width:100px;
    height:20px;
    line-height:20px;
    background-color:#FFF;
    text-align:center;
    margin-bottom:0px;
    color:#000;
    position:absolute;
    bottom:0;

}

.rightText
{
    float:right;
    font-size:10px;
    max-width:242px;
    padding-left:10px;
    color:#FFF;
    height: 100%;
    left:210px;    
}