css - 正常流中的 Div 重叠

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 验证程序运行您的页面会发现许多问题，例如多个 id的...

http://validator.w3.org