Question

我需要保持盒子的高度与图像的高度相同。当小猫（示例）图像高度为398px时，div应具有相同的高度问题是，其他子节点在.item 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; }

Live DEMO

Answer 1

您可以将.item设置为position: relative，将必要的孩子设置为position: absolute，稍微调整其顶部/底部位置。

http://jsfiddle.net/aK4vy/

Answer 2

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

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

现在，您可以将'white-box'放置在父容器中，其位置属性为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：demo

如果这不是您的选择，请说明原因。

父div与子Div一起扩展

2 个答案: