html - 将两个 div 放在另一个下方

Question

我在将两个 div 放在另一个下方时遇到了一些问题。

我尝试了一些在 Stackoverflow 中找到的解决方案，如下所示。
但似乎没有任何工作。

代码：

#wrapper {
  position: absolute;
}

#up {
  position: absolute;
  float: left;
}

#down {
  position: absolute;
  float: left;
  clear: left;
}

<div id="wrapper">
  <div id="up"></div>
  <div id="down"></div>
</div>

这是我的尝试，

小提琴

帮助将不胜感激。

Answer 1

删除 CSS。DIV 标签是块元素，自然会顺着页面向下流动。您正在浮动它们，这将导致它们并排显示。

特别是删除“浮动”属性。

Answer 2

这就是 DIV 默认的工作方式，只需删除您的 css。在这里查看一个工作示例：jsfiddle

<div id="wrapper">
<div id="up"></div>
<div id="down"></div>
</div>​

Answer 3

我不确定您是否希望外部 div 大于页面的高度，但这就是这样做的：

#DivSlider
{
    width:100%;
    position:absolute; 
    height:170%;
    background-color:green;
}

#DivHome
{
    height:26%;
    background-color:orange;
    border:1px solid black; /* You were missing the 'px' here */
}

#DivSkills
{
    height:25%;
    background-color:white;
    border:1px solid black;
}​