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),它将扩大其高度,以包括其飘浮的孩子。

相关文章

前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将...
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规...
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大...
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css...
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个...