Question

我有这个div：

<div class="member">
    <div class="memberImage"><img src="" /></div>
    <div class="memberInfo">John Doe</div>
</div>

这是它的css：

.member {
    width:200px;
    clear:both;
    position:absolute;
    padding:5px;
}

当我在这个div之下复制这个div时，由于position:absolute，它们看起来像是另一个。

是否可以保留position:absolute并让它们像往常一样低于另一个？

谢谢，

Answer 1

是否可以保留位置：绝对，让它们一个正常情况下低于另一个？

简单回答：否。

可能的解决方案：

向成员类添加top属性，并为每个成员增加
不要使用绝对定位（在这种情况下可能是最明智的）

从您的代码段判断，您要创建成员列表。一个适合这种情况的简单模式就是UL（无序列表）：

<ul class="memberlist">
    <li>
        <div class="memberImage"><img src="foo.jpg" /></div>
        <div class="memberInfo">John Doe</div>
    </li>
    <li>
        <div class="memberImage"><img src="foo.jpg" /></div>
        <div class="memberInfo">John Doe</div>
    </li>
    <li>
        <div class="memberImage"><img src="foo.jpg" /></div>
        <div class="memberInfo">John Doe</div>
    </li>
</ul>

还有一个相应的CSS：

.memberlist li {
    width: 200px;
    padding: 5px;
    margin-bottom: 10px;
}

Answer 2

是否可以保留position:absolute并让它们像往常一样低于另一个？

嗯，不，因为position:absolute旨在允许您指定元素的绝对位置。

这意味着它将默认为元素的左上角，它是绝对定位的，可以使用top和left属性（或{{bottom根据您的要求定位如果您愿意，可以1}}和right。

您可以指定具有特定top定位的两个元素，以便它们可以显示在另一个之下，这将回答您的问题，但实际上您要求的不是绝对定位，因此{ {1}}不合适。

你可能想要的是position:absolute，它更像是一个正常定位的元素，除了你可以使用position:relative和top等覆盖它。这将允许你做你想做的事，所以这听起来像是你问题的答案。

希望有所帮助。

Answer 3

因为你使用了类名，因此两者都有相同的样式，所以两者都有绝对位置，你可以给它们id或使用position：relative

是否可以将绝对定位元素彼此对齐？

3 个答案: