html - 基本 CSS/HTML 在一列中将一个 DIV 堆叠在另一个之下

Question

我意识到这是非常基础的，但我无法终生工作，为什么我无法让它工作，并且在过去的几个小时里尝试了一切

我需要堆叠 DIV，以便它们形成一个大长列，一个在另一个之上。它们包含在 JQuery 可滚动 DIV 中。我可以将所有 DIVS 绝对定位在里面，但是它们的负载会相当规律地变化，所以我希望有一个系统，如果我必须插入一个新的，它们会自动排列。

所以我基本上有一个大的可滚动 DIV。在这里面我有 2 个其他 DIV(#Release-Monsters 和#Release-Insides)每个包含 3 个进一步的 DIV。我想将这 2 个 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(除了 list 和 <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的位置这导致所有面板相互重叠，不好。

对于 Release-Monsters和 Release-Insides , 使用 position: relative这样绝对定位的元素就会留在您期望的位置。 (注意:有更简单的方法可以在不使用绝对定位的情况下执行此操作)。

最后，使用class而不是 id自 id值应该是唯一的。

此外，利用 CSS 级联并将字体和颜色声明保留在顶级规则中，.All-Releases在这个例子中。