1
如何讓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>
你能改變HTML嗎？我會添加三個HTML包裝，每個列周圍一個，並適當更新您的CSS。 – Blazemonger
請說明您的意思是「go under」。您是指z-index堆疊順序，還是頁面上實際的div排序。 – Korgrue
是的，一定要更新HTML，以使自己更容易 – Huangism