将两个div放在另一个下面

I am having some problems with placing two divs one below another.

I tried out some solutions found in * like below.
But Nothing seems to be working.

Code:

我在将两个div放在另一个下面时遇到了一些问题。我尝试了*中的一些解决方案,如下所示。但似乎没有什么工作。码:

#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>

Here's My Attempt,

这是我的尝试,

Fiddle

Helps would be appreciated.

帮助将不胜感激。

3 个解决方案

#1

Remove the CSS. DIV tags are block elements and would naturally flow down the page. You are floating them which would cause them to be displayed side by side.

删除CSS。 DIV标签是块元素,自然会向下流动。你漂浮它们会导致它们并排显示。

Especially remove the "float" attributes.

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

#2

That's how DIV's work by default, just remove your css. See a working example here: jsfiddle

这就是DIV默认工作的方式,只需删除你的CSS。在这里查看一个工作示例:jsfiddle

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

#3

-1

I'm not sure if you want the outer div to be greater than the height of the page, but that's what this does:

我不确定你是否希望外部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;
}

#1