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を変更できますか？私は3つのHTMLラッパーを追加し、それぞれの列の周りに1つずつ追加し、CSSを適切に更新します。 – Blazemonger
"下に行く"という意味を明確にしてください。あなたは、Z-インデックスの積み重ね順序、またはページ上の実際のdiv順序を参照していますか？ – Korgrue
そう、あなた自身でこれを簡単にするためにhtmlを間違いなく更新する必要があります – Huangism