0

我创建了一个 buddypress 主题，但是当我需要显示在线用户时，我的 css 不会将我的图像浮动到左侧。我已经设置了图像大小、填充和边距，它工作它只是无法浮动我的图像

这是 HTML 代码 

    <div class="item-title-members"> <a href="http://demo.com/user1">ovolo</a>

    </div>
</div>
<div class="item-avatar"> <a href="http://demo.com/user2" title="admin"><img src="http://imageshack.us/a/img89/3994/e6n6.png" class="avatar user-1-avatar avatar- photo" width="150" height="150" alt="Profile picture of admin" /></a>

    <div class="item-title-members"> <a href="http://demo.com/user2">admin</a>

    </div>
</div>

这是CSS

div.avatar-block {
height: 200px;
width: 94%;
}

div.avatar-block .item-avatar {
position: absolute;
float: left;
}

div.item-avatar a {
height: 200px;
width: 200px;
}

.item-title-members {
text-align: center;
}

http://jsfiddle.net/j9zru/1/

4

3 回答 3

1

position:absolute从 .item-avatar 类中移除

div.avatar-block .item-avatar {
 float: left;
}
于 2013-08-14T09:27:16.087 回答
0

将div 更改avatar-block为相对位置：

div.avatar-block .item-avatar {
    position: relative;
于 2013-08-14T09:24:18.783 回答
0

您在和上.item-avatar都指定了。绝对定位将覆盖任何其他定位指令，并且如果没有明确的偏移量，则会将内容定位在最近的父级中，而不是（或根本没有位置，默认情况下）。position: absolutefloat: leftabsoluteleft: 0px; top: 0pxpositionstaticstatic

因此，在您的情况下，最好的办法是简单地position: absolute从样式中删除并将其保留在：

div.avatar-block .item-avatar {
    float: left;
}

这是更新后的 jsfiddle结果。

于 2013-08-14T09:29:16.503 回答