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

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

Is it possible to keep the position:absolute and have them one below the other as normal?

简单的回答:不。

可能的解决方案:

• 为成员类添加一个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;
}