Html 将两个 div 放在另一个下面

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13750598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 04:14:20  来源:igfitidea点击:

Placing two divs one below another

htmlcss

提问by Rajaprabhu Aravindasamy

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

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

Code:

我在将两个 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>

Here's My Attempt,

这是我的尝试,

Fiddle

小提琴

Helps would be appreciated.

帮助将不胜感激。

回答by CM Kanode

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.

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

回答by Magicmarkker

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

回答by Shmiddty

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;
}?