如何让div下另一个div
问题描述：
如何让DIV“sideBottom”在“SideTop”和“console”下进入“Main”下？如何让div下另一个div
这是怎么看的那一刻：
HTML/CSS：
*{
padding : 0;
margin : 0;
border : 0;
}
body{
background-image : url(' bi-background-cubes.png ');
background-attachment : fixed;
background-size : 100% auto;
}
.blended_grid{
display : block;
width : 1370px;
overflow : auto;
margin : 50px auto 0 auto;
}
.pageHeader{
background-color : rgba(6,67,0,0.4);
float : left;
clear : none;
height : 70px;
width : 1370px;
}
.sideTop{
background-color : rgba(0,2,227,0.4);
float : left;
clear : none;
height : 430px;
width : 260px;
}
.main{
background-color : rgba(171,0,161,0.4);
float : left;
clear : none;
height : 600px;
width : 680px;
}
.tableInput{
background-color : rgba(156,141,0,0.4);
float : left;
clear : none;
height : 350px;
width : 400px;
}
.tableOutput{
clear : none;
float : left;
position : relative;
width : 400px;
height : 350px;
background-color : rgba(0,115,97,0.4);
}
.sideBottom{
clear : none;
float : left;
position : relative;
width : 260px;
height : 270px;
background-color : rgba(255,0,10,0.4);
}
.console{
background-color : lightgreen;
float : left;
clear : none;
height : 100px;
width : 680px;
}<div class="blended_grid">
<div class="pageHeader">`
<h1> pageHeader</h1>
</div>
<div class="sideTop">
<h1> SideTop </h1>
</div>
<div class="main">
<h1> Main </h1>
</div>
<div class="tableInput">
<h1>tableInput</h1>
</div>
<div class="tableOutput">
<h1> tableOutput</h1>
</div>
<div class="sideBottom">
<h1> SideBottom</h1>
</div>
<div class="console">
<h1> Console</h1>
</div>
</div>
答
摆脱花车，加上一些包装的div，并使用flex：
我想这是你想要什么：https://jsfiddle.net/znvuepLq/
这里有一个很好的资源用于柔性：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
HTML/CSS：
*{
padding : 0;
margin : 0;
border : 0;
}
body{
background-image : url(' bi-background-cubes.png ');
background-attachment : fixed;
background-size : 100% auto;
}
.blended_grid{
width : 1370px;
overflow : auto;
margin : 50px auto 0 auto;
}
.content{
display: flex;
}
.pageHeader{
background-color : rgba(6,67,0,0.4);
height : 70px;
width : 1370px;
}
.sideTop{
background-color : rgba(0,2,227,0.4);
height : 430px;
width : 260px;
}
.main{
background-color : rgba(171,0,161,0.4);
height : 600px;
width : 680px;
}
.tableInput{
background-color : rgba(156,141,0,0.4);
height : 350px;
width : 400px;
}
.tableOutput{
width : 400px;
height : 350px;
background-color : rgba(0,115,97,0.4);
}
.sideBottom{
width : 260px;
height : 270px;
background-color : rgba(255,0,10,0.4);
}
.console{
background-color : lightgreen;
height : 100px;
width : 680px;
}<div class="blended_grid">
<div class="pageHeader">`
<h1> pageHeader</h1>
</div>
<div class="content">
<div>
<div class="sideTop">
<h1> SideTop </h1>
</div>
<div class="sideBottom">
<h1> SideBottom</h1>
</div>
</div>
<div>
<div class="main">
<h1> Main </h1>
</div>
<div class="console">
<h1> Console</h1>
</div>
</div>
<div>
<div class="tableInput">
<h1>tableInput</h1>
</div>
<div class="tableOutput">
<h1> tableOutput</h1>
</div>
</div>
</div>
</div>+0
非常感谢你！这正是我想要的！太棒了....你是一个明星*。 – Ng21
你能改变HTML吗？我会添加三个HTML包装，每个列周围一个，并适当更新您的CSS。 – Blazemonger
请说明您的意思是“go under”。您是指z-index堆叠顺序，还是页面上实际的div排序。 – Korgrue
是的，一定要更新HTML，以使自己更容易 – Huangism