即使内容包含内容，Div也不会扩展 [英] Div not expanding even with content inside

问题描述

我有一堆彼此相对的div，所有这些div都有一个仅指定CSS的ID。

但由于某些原因，周围的DIV标签只扩展它是指定的高度值，而不是默认的自动，这意味着虽然内容在里面，但是底层DIV只是一个特定的高度。我需要它将高度调整到其内部的任何大小（因为用户提交的数据可能会以超过500个单词的段落回显）。

这是我的HTML

 < div id =albumhold> 
 
< div id =albumpic> Pic here< / div> 
 
< div id =infohold> 
 
< div id =albumhead> Name |日期和LT; / DIV> 
< div id =albuminfo>资讯< / div> 
 
< / div> 
  

以及用于HTML代码的CSS：

  #albumhold {
 width：920px; 
 padding：10px; 
 height：auto; 
 border：1px solid＃E1E1E1; 
 margin-left：auto; 
 margin-right：auto; 
背景颜色：＃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; 
背景颜色：#CCC; 
 float：right; 
 height：20px; 
} 
 
 #albumhead {
 width：800px; 
 height：20px; 
 text-indent：10px; 
 border：1px solid＃000; 
颜色：＃09F; 
} 
 
 #albuminfo {
 margin-top：5px; 
 width：800px; 
 float：right; 
颜色：＃09F; 
 word-wrap：分词; 
 
  

非常感谢帮助。

解决方案

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

里面的所有元素 #albumhold 浮动，除了 #albumhead ，这看起来不会占用太多空间。 / p>

然而，如果您将 overflow：hidden; 添加到 #albumhold （或其他一些CSS来清除其中的浮动内容），它会将其高度扩展为包括漂浮的孩子。

I have a stack of divs inside of each other, all of which have an ID which specifies CSS only.

But for some reason the surrounding DIV tag only expands to it's anointed height value, and not it's default auto, meaning that although the content is inside, the backing DIV is only a specific height. I need it to adjust the heigh to the size of whatever is inside of it (As there will be user submitted data being echoed out possibly in paragraphs with 500+ words.)

Here is my 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>

And the CSS for the HTML code:

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

Help is greatly appreciated.

解决方案

Floated elements don’t take up any vertical space in their containing element.

All of your elements inside #albumhold are floated, apart from #albumhead, which doesn’t look like it’d take up much space.

However, if you add overflow: hidden; to #albumhold (or some other CSS to clear floats inside it), it will expand its height to encompass its floated children.

这篇关于即使内容包含内容，Div也不会扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！