正常流量重疊

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 。

每個<div> id必須唯一。

如注釋中所述，您將使用類將樣式一次應用於多個元素。

您還可以將它們全部設置為position:absolute; top:0px; 將它們同時放在同一位置。

---

通過W3C驗證程序運行頁面會遇到許多問題，例如多重id的...

http://validator.w3.org

Answer 2

絕對定位時，您的div不在正常流程中。 這就是元素重疊的原因。 絕對定位會將它們相對於最近定位的父對象“絕對”放置。

請注意有關唯一ID名稱的其他注釋。