对不起,一个奇怪的标题,但我真的不知道如何轻松地描述它。
首先,我将在其上链接我的 JSFiddle http://jsfiddle.net/b7YTd/
当我添加“float:left”和“float:right”时,行跳出框并且框不会随着内容变得“更大”而扩展。
我的问题是,如果盒子没有设定高度,我如何让盒子在内容之后展开,就像它应该对里面的内容做的那样?
为了发布我的 JSFiddle,我需要添加一些代码,以便我的 CSS:
#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
}
.friend_left {
float: left;
width: 250px;
}
.friend_right {
float: right;
width: 250px;
}
.friend img {
width: 50px;
height: 50px;
float: left;
margin-left: 15px;
margin-right: 8px;
}
.friend ul {
list-style-type: none;
margin-top: -15px;
margin-left: 35px;
}
#profile_friends h4 {
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
color: rgb(110,110,110);
font-weight: bold;
height: 20px;
}
#profile_friends hr {
margin: 0;
padding: 0;
}