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