2

对不起，也许是一个糟糕的标题，但就像我的许多问题一样，它们很难用标题来描述。

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

我想要的是让每个带有“friend_left”类的div像列表一样浮动到左侧，每个带有“friend_right”类的div都向右浮动。它与 2 个朋友完美搭配，但是当我添加 3 个或更多朋友时，他们开始填充中间，就像 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;
}
4

3 回答 3

2

最简单的方法就是添加clear:left到您的班级.friend_left和班级：clear:right.friend_right

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

jsFiddle 示例

于 2013-09-03T13:52:55.480 回答
1

我建议使用像SimpleGrid这样的网格框架。它将确保一切都井井有条，您无需为细节工作而烦恼。

于 2013-09-03T13:53:57.607 回答
1

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

.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/

于 2013-09-03T14:02:15.337 回答