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

时间:2014-03-20 14:18:02

标签: html css html5 css3

我在撰写新闻文章时遇到了一些麻烦。这是我希望拥有的预览: enter image description here 在左边你总是有一个图像(宽度总是相同,高度不是&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/

1 个答案:

答案 0 :(得分:1)

enter image description here

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;    
}