基本CSS/HTML在一列最多可疊加一個DIV下方另一

Question

我意識到這是如此簡單，但不能爲我的生活工作，爲什麼我不能得到它的工作，並已花了幾個小時亂投醫

我需要疊加DIV，以便它們形成一個很長的列，一個在另一個之上。它們包含在JQuery可滾動的DIV中。我可以絕對定位所有的DIVS，但是會有一些定期更改的負載，因此如果我必須插入新的DIVS，系統會自動將它們排列。

所以我基本上有一個大的可滾動DIV。在這裏面我有2個其他DIV（＃發行 - 怪獸&＃Release-Insides），每個DIV包含3個DIV。正是這兩個DIV（＃Release-Monsters &＃Release-Insides）我想堆疊在一起形成一個列。一旦我有這2個工作，我會增加約50左右。

我的CSS是這樣的：

#All-Releases- { 
    position:absolute; 
    left:250px; 
    top:210px; 
    width:600px; 
    height:600px; 
    z-index:3; 
} 
/* Used to control height of scrollable div*/ 
p.ex 
{ 
height:600px; 
width:100px; 
} 
/* Vertical and horizontal scrollbar - one extra step required - add width of overview - overall width of scrolled content*/ 
#All-Releases- { 
    width: 500px; 
     } 
#Release-Monsters { 
    position:static; 
    width:600px; 
    height:322px; 
    z-index:3; 
    } 
#Artwork-Monsters { 
    position:absolute; 
    left:19px; 
    top:2px; 
    width:284px; 
    height:284px; 
    z-index:3; 
} 
#Release-Title-Monsters { 
    position:absolute; 
    left:322px; 
    top:0px; 
    width:284px; 
    height:284px; 
    color: #CCC; 
    font-size: 18px; 
    font-family: Century Gothic, Geneva, sans-serif; 
    letter-spacing: 2px; 
    text-align: justify; 
    z-index:3; 
} 
#Release-Info-Monsters { 
    position:absolute; 
    left:322px; 
    top:25px; 
    width:278px; 
    height:284px; 
    color: #CCC; 
    font-size: 12px; 
    font-family: Century Gothic, Geneva, sans-serif; 
    letter-spacing: 1px; 
    text-align: justify; 
    z-index:3; 
} 
#Release-Insides { 
    display:block; 
    width:600px; 
    height:322px; 
    z-index:3; 
    } 
#Artwork-Insides { 
    position:absolute; 
    left:19px; 
    top:2px; 
    width:284px; 
    height:284px; 
    z-index:3; 
} 
#Release-Title-Insides { 
    position:absolute; 
    left:322px; 
    top:0px; 
    width:284px; 
    height:284px; 
    color: #CCC; 
    font-size: 18px; 
    font-family: Century Gothic, Geneva, sans-serif; 
    letter-spacing: 2px; 
    text-align: justify; 
    z-index:3; 
} 
#Release-Info-Insides { 
    position:absolute; 
    left:322px; 
    top:25px; 
    width:278px; 
    height:284px; 
    color: #CCC; 
    font-size: 12px; 
    font-family: Century Gothic, Geneva, sans-serif; 
    letter-spacing: 1px; 
    text-align: justify; 
    z-index:3; 
} 

和HTML是這樣的：

<div id="All-Releases-" class="default-skin demo"> 
<div id="Release-Monsters"> 
<div id="Artwork-Monsters"><img src="images/Release-Artwork/Monsters.jpg" width="284" height="284" /></div> 
<div id="Release-Title-Monsters">MONSTERS</div> 
<div id="Release-Info-Monsters"> 
1. Prologue<br /> 
2. Journey <br /> 
3. Candles <br /> 
4. Water <br /> 
5. Underwater <br /> 
6. Spores <br /> 
7. Campfire <br /> 
8. Dawn <br /> 
9. Attack <br /> 
10. Temple <br /> 
11. Encounter <br /> 
12. Monsters Theme 
    </div></div> 
<div id="Release-Insides"> 
<div id="Artwork-Insides"><img src="images/Release-Artwork/Insides.jpg" width="284" height="284" /></div> 
<div id="Release-Title-Monsters">INSIDES</div> 
<div id="Release-Info-Insides"> 
1. The Wider Sun <br /> 
2. Vessel <br /> 
3. Insides <br /> 
4. Wire <br /> 
5. Colour Eye <br /> 
6. Light Through The Veins <br /> 
7. The Low Places <br /> 
8. Small Memory <br /> 
9. A Drifting Up <br /> 
10. Autumn Hill<br /> 
    </div></div> 

<p class="ex"></p> 

</div> 

    <div id="All-Releases-" class="default-skin demo"> 
<div id="Release-Monsters"> 
<div id="Artwork-Monsters"><img src="images/Release-Artwork/Monsters.jpg" width="284" height="284" /></div> 
<div id="Release-Title-Monsters">MONSTERS</div> 
<div id="Release-Info-Monsters"> 
1. Prologue<br /> 
2. Journey <br /> 
3. Candles <br /> 
4. Water <br /> 
5. Underwater <br /> 
6. Spores <br /> 
7. Campfire <br /> 
8. Dawn <br /> 
9. Attack <br /> 
10. Temple <br /> 
11. Encounter <br /> 
12. Monsters Theme 
    </div></div> 
<div id="Release-Insides"> 
<div id="Artwork-Insides"><img src="images/Release-Artwork/Insides.jpg" width="284" height="284" /></div> 
<div id="Release-Title-Monsters">INSIDES</div> 
<div id="Release-Info-Insides"> 
1. The Wider Sun <br /> 
2. Vessel <br /> 
3. Insides <br /> 
4. Wire <br /> 
5. Colour Eye <br /> 
6. Light Through The Veins <br /> 
7. The Low Places <br /> 
8. Small Memory <br /> 
9. A Drifting Up <br /> 
10. Autumn Hill<br /> 
    </div></div> 

<p class="ex"></p> 

</div> 
<script type="text/javascript"> 
    $(window).load(function() { 
     $(".demo").customScrollbar(); 
    }); 
</script 

>

Answer 1

我看過了你的HTML（不太除了列表和<br>壞的）和你的CSS（過於複雜）。

我清理了一點東西，你看到成績：

http://jsfiddle.net/audetwebdesign/42bgv/

主要CSS修復

這裏是我修改的CSS：

.All-Releases { 
    position: relative; 
    left: 20px; 
    top: 0px; 
    width:600px; 
    height: auto; 
    color: #CCC; 
    font-size: 12px; 
    font-family: Century Gothic, Geneva, sans-serif; 
    outline: 2px dotted blue; 
} 
.Release-Monsters { 
    position: relative; 
    width:600px; 
    height:322px; 
    outline: 2px dotted gray; 
} 

... 

.Release-Insides { 
    position: relative; 
    width:600px; 
    height:322px; 
    outline: 2px dotted gray; 
} 

... 

最初，你宣佈absolute職位爲.All-Releases其中ca使用所有面板重疊，不好。

對於Release-Monsters和Release-Insides，請使用position: relative，以便絕對定位元素保持您期望的位置。 （注意：沒有使用絕對定位，有更簡單的方法）。

最後，使用class而不是id，因爲id值被認爲是唯一的。

此外，利用CSS級聯並將字體和顏色聲明保留在頂層規則.All-Releases中。

Answer 2

一個float屬性添加到每個* * S的。例如：

#Artwork-Monsters { 
    position:absolute; 
    float:left; 
    left:19px; 
    top:2px; 
    width:284px; 
    height:284px; 
    z-index:3; 
} 

Answer 3

我會改變你的HTML有無序列表下手除掉你有所有BR標籤，並且能夠得到它有點整潔。

的jsfiddle

例子：http://jsfiddle.net/uk3BW/ < - 沒有滾動條

例子：http://jsfiddle.net/uk3BW/1/ < - 有滾動條

HTML

<ul id="Release-Info-Monsters"> 
<li> Prologue </li> 
<li> Journey </li> 
<li> Candles </li> 
<li> Water </li> 
<li> Underwater </li> 
<li> Spores </li> 
<li> Campfire </li> 
<li> Dawn </li> 
<li> Attack </li> 
<li> Temple </li> 
<li> Encounter </li> 
<li> Monsters Theme </li> 
</ul> 

CSS

ul { 
display:block; 
background:#aeaeae; 
padding:10px; 
width: 250px; 
list-style:none; 
} 

li { 
    display:block; 
    background:#eee; 
    padding: 10px 0; 
    width: 100%; 
    text-align:center; 
} 

li:last-child { 
margin: 0; 
} 

li { 
    margin: 0 0 10px 0;} 
li:hover { 
    background:#ccc; 
}