css – Div即使内容内容也不扩展

前端之家收集整理的这篇文章主要介绍了css – Div即使内容内容也不扩展前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个堆的div在彼此内部,所有的都有一个ID仅指定CSS。

但是由于某种原因,周围的DIV标签只会扩展为它的涂抹高度值,而不是默认自动,这意味着虽然内容在里面,但是后台DIV只有一个特定的高度。我需要它来调整高度的任何内部的大小(因为将有用户提交的数据被回声可能在段落500字)。

这是我的HTML

<div id="albumhold">

    <div id="albumpic">Pic here</div>

    <div id="infohold">

    <div id="albumhead">Name | Date</div>
    <div id="albuminfo">Information</div>

</div>

HTML代码的CSS:

#albumhold {
    width: 920px;
    padding: 10px;
    height: auto;
    border: 1px solid #E1E1E1;
    margin-left: auto;
    margin-right: auto;
    background-color: #E1E1E1;
    background-image: url(../global-images/albumback.png);
    background-position: top center;
    background-repeat: repeat-x;
}

#albumpic {
    display: block;
    height: 110px;
    width: 110px;
    float: left;    
    border: 1px solid #000;
}

#infohold {
    width: 800px;
    background-color: #CCC;
    float: right;
    height: 20px;
}

#albumhead {
    width: 800px;
    height: 20px;
    text-indent: 10px;
    border: 1px solid #000;
    color: #09F;    
}

#albuminfo {
    margin-top: 5px;
    width: 800px;
    float: right;
    color: #09F;
    word-wrap:break-word;
}

帮助非常感谢。

解决方法

浮动元素不占用其包含元素中的任何垂直空间。

#albumhold里面的所有元素都是浮动的,除了#albumhead,它看起来不会占用太多的空间。

但是,如果你添加overflow:hidden;到#albumhold(或some other CSS to clear floats inside it),它将扩大其高度,以包括其飘浮的孩子。

原文链接:https://www.f2er.com/css/222203.html

猜你在找的CSS相关文章