Question

我试图一个接一个地定位一系列div（高度是动态的），以便它们与父母的宽度相同。我的理解是，这是正常流程应该做的，但它们最终会重叠。

请参阅http://www.euro-endo.nl/technologies.php

我的HTML：

<div id="col">

<div id="thing">
    <div id="rimage">
    <div id="pic1"></div>
</div>
<div id="ltext">
    text1
</div>
</div>
<div id="thing">
    <div id="limage">
    <div id="pic2"></div>
</div>
<div id="rtext">
    text2
</div>

</div>

和相应的css是：

#col { 
    position: absolute; left: 20px; right: 50px; top:0; bottom:0px;
    width: auto;
    padding: 10px 20px 0px 0px;
    overflow: hidden;
} 
#thing {
    position: static; 
    width: 100%;
    height: auto;
    Margin: 20px;
} 


#ltext {
    position: absolute; left: 0px; right: 210px; top:0px; bottom:0px; 
    width: auto;
    height: auto;
}

#rtext {
    position: absolute; right: 0px; left: 210px; top:0px; bottom:0px; 
    width: auto;
    height: auto;
} 

#rimage {
    position: absolute; right: 0px; top:0px; bottom:0px; 
    width: 210;
    height: auto;
}


#limage {
    position: absolute; left: 0px; top:0px; bottom:0px; 
    width: 210;
    height: auto;
}

（还有一些id="thing" div，但我认为这给出了它的要点。）

Answer 1

肯定有一个大问题......

您不能让多个<div>共享相同的id。

每个id

<div>必须是唯一的。

如评论中所述，您可以使用类一次将样式应用于多个元素。

您还可以将position:absolute;全部设置为top:0px;，并将它们全部放在同一位置。

通过W3C Validator运行您的页面会遇到许多问题，例如多个id ...

http://validator.w3.org

Answer 2

当你的div绝对定位时，它们不在正常流程中。这就是元素重叠的原因。绝对定位会将它们“绝对”放在最近定位的父母身上。

请注意有关唯一ID名称的其他注释。

正常流量的Div重叠

2 个答案: