展开包含内容的框

时间:2013-09-01 00:28:21

标签: html css

很抱歉有一个奇怪的标题,但我真的不知道怎么容易描述它。

首先,我将链接我的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;
}

2 个答案:

答案 0 :(得分:2)

如果我理解你正确使用:

#friendlist {
    overflow: auto;
}

http://jsfiddle.net/b7YTd/1/

答案 1 :(得分:0)

我有这个问题,但是使用了溢出:隐藏;在父母div。

http://jsfiddle.net/b7YTd/3/

#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
overflow:hidden;

}