CSS使用不同的图像高度阻止相同的高度

Question

我在撰写新闻文章时遇到了一些麻烦。这是我希望拥有的预览： 在左边你总是有一个图像（宽度总是相同，高度不是＆t; t）。在右侧，您可以获得一些信息，并在底部与图像对齐。

<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绝对宽度，我创建了一个容器宽度：500px; 然后右侧文本必须包含按钮本身，但按钮必须对齐宽度图像底部，因此右侧文本高度等于图像高度和位于底部的按钮：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;    
}