Question

我创建了一个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/

Answer 1

从.item-avatar类

中删除position:absolute

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

Answer 2

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

div.avatar-block .item-avatar {
    position: relative;

Answer 3

您在.item-avatar position: absolute和float: left上指定了。绝对定位将覆盖任何其他定位指令，而absolute没有明确的偏移量会将内容定位在left: 0px; top: 0px内最近的父级内position而不是static（或根本没有位置），因为static是默认值。）

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

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

这里是updated jsfiddle的结果。

CSS图像不会向左浮动

3 个答案: