Question

对不起，可能是一个糟糕的头衔，但就像我的许多问题一样，很难形容为头衔。

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

我想要的是让每个具有类“friend_left”的div像列表一样浮动到左侧，并且每个div都使用类“friend_right”浮动到右侧。它与2位朋友完美配合，但当我添加3个或更多时，他们开始填充中间以及JSFiddle节目。

无论如何，我如何保持左/右？

为了发布JSFiddle-links，我必须提供一些代码，这是我的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

Answer 2

我建议使用像SimpleGrid这样的网格框架。它将确保一切正常，您不需要为细节工作而烦恼。

Answer 3

您需要按如下方式清除浮动：

.friend_left {
    float: left;
    width: 250px;
    border: 1px dotted blue;
    clear: left;
}
.friend_right {
    float: right;
    width: 250px;
    border: 1px dashed blue;
    clear: right;
}

您需要考虑左右浮动数量的不等，因此您需要清除左侧.friend-left，清除.friend_right右侧。

请参阅演示：http://jsfiddle.net/audetwebdesign/ESL5w/

列不是＆＃34;堆叠＆＃34;

3 个答案: