1

我需要保持盒子的高度与图像的高度相同。当小猫（示例）图像的高度为 398px 时，div 应具有相同的高度。
问题是，.item div 内的其他子 div 将父 div 扩展为大约。150 像素。

我怎样才能阻止这种行为？
我尝试了其他几种方法，例如溢出：隐藏/自动等，但没有任何效果。
请需要帮助！:)

HTML：

<div id="container">
    <div class="item">
        <img src="http://placekitten.com/g/398/398" />
        <div class="box">
            <span id="header-content">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr
            </span>
        </div>
        <div class="headlineblog"><h1>Headline</h1></div>
        <div class="cat"><h2>Category</h2></div>
    </div>
</div>​

CSS：

#container {}
.item {width: 398px;float:left;margin: 10px;overflow: hidden !important;}
.item > img {width: 398px !important}
.item .box {background-color: white;
margin: 10px;
height: 65px;
position: relative;
top: -110px;
font-size: 14px;
color: #BBBDBE;
min-height: 65px;
padding: 10px;
width: 358px;

}
.cat {position: relative;left: 280px;bottom: 230px;}
.cat h2 a{font-size: 14px;text-transform: uppercase;font-weight: 300;color: #FF6400}
.headlineblog {position: relative;left: 20px;bottom: 195px;}
.headlineblog h1 a{font-size: 18px; color: black; font-weight: 700}
.item .box #header-content { position: absolute; bottom: 10px;font-size: 14px;font-weight: 300;color: grey;width: 310px;text-overflow: ellipsis;overflow: hidden;-o-text-overflow: ellipsis;white-space: nowrap; }​

现场演示

4

2 回答 2

1

您可以设置.itemhaveposition: relative和必要的 children to have position: absolute，稍微调整他们的顶部/底部位置。

于 2012-08-29T16:07:29.327 回答
1

不知道我是否错过了什么，但我会这样做：

给在这种情况下div.item是位置属性的父容器position: relative;

现在，您可以将“白盒”放置在父容器中，其位置属性position: absolute;为将其放置在父容器的底部，使用bottom: 5px;（或其他适合您的数字）如果您希望白盒位于顶部，您会使用类似的东西top: 5px;

我认为没有理由以绝对的方式将元素放置在“白盒”中。在我看来，使用浮点数要清楚得多。无论如何，这是代码：

标记：

<div id="container">
    <div class="item">
        <img src="http://placekitten.com/g/398/398">
        <div class="box">
            <div class="top">
                <span class="headlineblog"><h1>Headline</h1></span>
                <span class="cat"><h2>Category</h2></span>                
            </div>
            <span class="header-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
        </div>
    </div>
</div>​

款式：

#container {}

.item {
    position: relative;
    margin: 10px;
}
.item img { 
    width: 398px;
}

.item .box {
    position: absolute;
    bottom: 10px;    
    height: 65px;
    width: 358px;
    margin: 10px;
    padding: 10px;
    background-color: white;    
}

.item .box .top {
    /* clear the floating elements */
    overflow: hidden;
    margin: 0 0 5px 0;
}

.item .box .headlineblog {
    float: left;
}

.item .box .cat {
    float: right;
}

​.​item .box .header-content {
    color: grey;
}​

jsfiddle：演示

如果这不适合您，请说明原因。

于 2012-08-29T17:02:23.610 回答