2017-06-05 111 views
1

如何让DIV“sideBottom”在“SideTop”和“console”下进入“Main”下?如何让div下另一个div

这是怎么看的那一刻:

Current page layout

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>

+0

你能改变HTML吗?我会添加三个HTML包装,每个列周围一个,并适当更新您的CSS。 – Blazemonger

+0

请说明您的意思是“go under”。您是指z-index堆叠顺序,还是页面上实际的div排序。 – Korgrue

+0

是的,一定要更新HTML,以使自己更容易 – Huangism

回答

0

摆脱花车,加上一些包装的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

0

尝试使用的z-index。它决定了什么div/object首先被渲染。 :)

+1

好主意,但你应该包括一个例子,以防他是一个视觉学习者。 MDN关于Z索引的文章的链接也会有所帮助。 – ashbygeek

+0

谢谢,很高兴知道z-index。 – Ng21