为什么我无法在另一个div下面放置一个div？

I know this sounds too simple but I am unable to place one div below the other div , and my code is

我知道这听起来太简单但我无法在另一个div下面放置一个div,而我的代码是

html:

<div id="gamediv"></div>
<div class="style"></div>

css:

.style {
    width:728px;
    height:90px;
    margin-left:auto;
    margin-right:auto;
}

3 个解决方案

#1

After doing some ugly hack in my css & in my first div style i am able to place my desired div below first div , this is my css code:

在我的css和我的第一个div风格做了一些丑陋的黑客后,我能够将我想要的div放在第一个div之下,这是我的css代码:

.style{
    width:728px;
    height:90px;
    margin-left:auto;
    margin-right:auto;
    position:absolute;
    bottom:0px;
    left:323px;
}

first div style property: <div id="gamediv" style="position:relative;"></div>

第一个div样式属性:

for now this solution is working but still i can't figure out why previous solutions didn't worked, any explanation regarding this is appreciated!!

目前这个解决方案正在运行,但我仍然无法弄清楚为什么以前的解决方案没有奏效,对此的任何解释都表示赞赏!!

#2

This is beacuses your div will be displayed befault in line. It will take all the space it has to dispay divs. something you can do is to create another div to include the 2 you create and specifying a specific width:

这是beacuses你的div将显示为befault in line。它需要占用所有空间来分配div。你可以做的是创建另一个div来包含你创建的2并指定一个特定的宽度:

<div id="container">
    <div id="gamediv"></div>
    <div class="style"></div>
</div>

Then add your style such as

然后添加你的风格,如

#container{
width: 800px;
height: 200px;
}
.gamediv{
width:750px;
height:40px;
}
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}

then you may want to align with float or centre with margin:auto; Try to to imagine div as boxes. if it help you may add

然后你可能想要与浮点或中心对齐与margin:auto;试着想象div作为盒子。如果有帮助你可以添加

border:1px solid black;

this will draw the box and you will see what you are doing

这将绘制框,你会看到你在做什么

#3

add display: block; also in the stylesheet (for both div)

添加显示:块;也在样式表中(对于两个div)

#1