html - 列不是 "stacking"

Question

抱歉标题可能不好，但就像我的许多问题一样，它们很难用标题来描述。

为了演示我的问题，我创建了一个 JSFiddle:http://jsfiddle.net/b7YTd/4/

我想要的是让类为“friend_left”的每个 div 都像列表一样 float 到左侧，而类为“friend_right”的每个 div 都 float 到右侧。它与 2 个 friend 完美搭配，但当我添加 3 个或更多 friend 时，它们开始填充中间，就像 JSFiddle 显示的那样。

无论如何，我如何让它保持在左/右位置？

为了发布 JSFiddle 链接，我必须提供一些代码，这是我的 CSS:

#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
}
#friendlist {
overflow: auto;
}
.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;
}

Answer 1

最简单的方法就是将 clear:left 添加到您的 .friend_left 类，并将 clear:right 添加到您的 。 friend_right 类:

.friend_left {
    float: left;
    width: 250px;
    clear:left;
}

jsFiddle example