Html 另一个 DIV 内的另一个 DIV 内的 DIV 使用 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9438437/
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
DIVs inside another DIV inside another DIV with CSS
提问by Igal
Here's what I'm trying to achieve:
这是我想要实现的目标：
This is the HTML code I wrote:
这是我写的HTML代码：
<div id="wrapper"> <!--This is the Div 1 in the picture-->
<div id="topBar"> <!--This is the Div 2 in the picture-->
<div id="logo"></div> <!--This is the Div 4 in the picture-->
<div id="menu"></div> <!--This is the Div 5 in the picture-->
<div id="login"><!--This is the Div 6 in the picture-->
<div class="loginElement"><input type="text" id="txtUsername" class="loginElementBox" size="29" value="User name" onClick="usernameFocus()" onBlur="usernameBlur()" /></div>
<div class="loginElement">
<input type="text" name="txtFakePassword" id="txtFakePassword" class="loginElementBox" value="Password" onfocus="passwordFocus()" /><input style="display:none;" type="password" id="txtPassword" class="loginElementBoxFocus" onBlur="passwordBlur()" />
</div>
<input type="button" id="btnLogin" value="" onclick="login()"><br />
<span id="lblError"></span>
</div><!--Closing "login"-->
</div><!--Closing "topBar"-->
<div id="central"> <!--This is the Div 3 in the picture-->
<div id="top3"> <!--This is the Div 7 in the picture-->
</div>
</div><!--Closing "central"-->
</div><!--Closing "wrapper"-->
and this is the CSS:
这是 CSS：
#wrapper
{
width:800px;
background-color:#f2f2e8;
position:relative;
left:50%;
margin-left:-400px;
border-radius: 10px;
-moz-border-radius: 10px;
padding:5px;
}
#topBar
{
width:780px;
border: 1px solid;
border-color: #dbd9ca;
border-radius: 10px;
-moz-border-radius: 10px;
margin:5px;
padding:5px;
}
#logo
{
width:153px;
height:66px;
background-image:url(../images_ui/logo2.png);
background-repeat:no-repeat;
background-position:left center;
margin:5px;
padding:5px;
float:left;
}
#menu
{
float:left;
width:400px;
position:relative;
}
#login
{
float:right;
width:80px;
}
#central
{
width:780px;
border: 1px solid;
border-color: #dbd9ca;
border-radius: 10px;
-moz-border-radius: 10px;
margin:5px;
margin-top:20px;
padding:5px;
}
Inside Div 6 I have a few more Divs It all just comes out scrambled. Div 2 and Div 3 look OK inside Div 1, and Div 7 looks nice inside Div 3, but once I add Divs 3, 4, 5... I tried several things, with float, position etc - nothing worked, I can't arrange it as I want it. Any ideas how to make it work?
在 Div 6 里面，我还有一些 Divs 这一切都是乱七八糟的。Div 2 和 Div 3 在 Div 1 中看起来不错，Div 7 在 Div 3 中看起来不错，但是一旦我添加了 Divs 3、4、5...按我的意愿安排吧。任何想法如何使它工作？
回答by Sven Bieder
#Div1
{
width:800px;
margin:0 auto;
overflow:hidden;
float:left;
}
#Div2
{
width:100%;
float:left;
}
#Div3
{
width:100%;
clear:both;
}
#Div4, #Div6
{
float:left;
width:30%;
}
#Div5
{
float:left;
width:40%;
}
#Div7
{
width:70%;
margin:50px auto;
}
If I haven't forgotten something that should be round about it
如果我没有忘记一些应该围绕它的东西
