对齐HTML中的多个元素

Question

我对HTML比较陌生，现在我已经搜索了一段时间，但无法提供某些内容，或者我的搜索条件可能不正确。

无论如何，我熟悉边界布局（北，南，西，东，中），但我无法理解的是如何在不同的事情中对齐我的元素。

例如：

|-----------------------------------------------------| 
|    Navbar goes here      | 
|-----------------------------------------------------| 
|              | 
| ---------------------   -------------------- | 
| |Box1|    |   |Box2|    | | 
| |----    |   |----    | | 
| |     |   -------------------- | 
| |     |        | 
| |     |   -------------------- | 
| |     |   |Box3|    | | 
| |     |   |----    | | 
| ---------------------   -------------------- | 
|              | 
| -------------------------------------------------- | 
| |Box4|           | | 
| |----            | | 
| |             | | 
| -------------------------------------------------- | 
------------------------------------------------------ 

可以像上面与边框布局可以实现吗？或者我错过了什么？

我想出了另一个StackOverflow post但提到的CSS代码使我的箱子相互重叠。

Answer 1

我现在的工作对这个相当长的一段时间。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav> 

<div class="container">     


    <div>              

     <div>Box 1</div>  
     <div>       

      <div>Box 2</div>  

      <div>Box 3</div>  

     </div> 


    </div>        

    <div>Box 4</div>      

</div> 

CSS：

html, body, .container { 
    height: 100%; 
    background-color: white; 
} 

.container { 
    display: flex; 
    flex-direction: column; 
    margin-top: 50px; 
} 

.container div {     
    margin: 10px; 
    flex: 1; 
    background-color: blue; 
} 

.container > div:nth-child(2) { } 

.container > div:first-child { 
    display: flex; 
    background-color: white; 

} 
.container > div:first-child > div:first-child { 
    margin-right: 20px; 

} 

.container > div:first-child > div:nth-child(2) { 
    display: flex; 
    flex-direction: column; 
    background-color: white; 

} 

.container > div:first-child div { 
    flex: 1; 
    margin: 0; 
} 

.container > div:first-child > div:nth-child(2) > div:first-child { 
    margin-bottom: 20px; 
} 

.container > div:last-child { } 

JSFIDDLE

为了让你想你需要利用flex CSS属性的设计。这方面的一些例子是here。文档是here。

div:nth-child()顾名思义就是用来找到属于母公司div container的nth div。在第一行中，你需要一个水平弯曲，第二个框必须是一个垂直弯曲。 flex-direction: column;将导致垂直柔性显示。

我希望我解释得当。

Answer 2

检查了这一点.. 这给你一模一样的设计..

<div class="container"> 
    <nav> 
    Navbar goes here 
    </nav> 
    <div class="second"> 
    <div class="box1">box1</div> 
    <div class="inner"> 
     <div class="box2">box2</div> 
     <div class="box3">box3</div> 
    </div> 
    </div> 
    <div class="box4">box4</div> 
</div> 

<style> 
*{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    box-sizing: content-box; 
} 
.container{ 
    display: block; 
    width: 100%; 
} 
nav{ 
    display: block; 
    background: #000; 
    color: white; 
    text-align: center; 
    padding: 20px; 
} 
.second{ 
    display: flex; 
} 
.second .box1{ 
    width: 100%; 
    height: 80vh; 
    background: #d2c3c3; 
} 
.second .inner{ 
    width: 100%; 
} 
.second .inner .box2{ 
    height: 40vh; 
    background: #ddd; 
} 
.second .inner .box3{ 
    height: 40vh; 
    background: #9e8181; 
} 
.box4{ 
    display: block; 
    background: #000; 
    color: white; 
    padding: 20px; 
} 
</style>