如何让div进入另一个div

Question

我如何制作DIV＆＃34; sideBottom＆＃34;走到＆＃34; SideTop＆＃34;和＆＃34; console＆＃34; ＆＃34; Main＆＃34;？

这就是目前的情况：

HTML / CSS：

＆＃13;

＆＃13;

*{
    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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

摆脱浮动，添加一些包装div，并使用flex：

我认为这就是你想要的：https://jsfiddle.net/znvuepLq/

这是一个很好的flex资源：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>

Answer 2

尝试使用z-index。 它确定首先渲染div /对象。 ：）