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 nth div的{{1}}。在第一行中，您需要水平弯曲，第二行本身必须是垂直弯曲。 container将导致垂直弹性显示。

我希望我能正确解释。

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>

在HTML中对齐多个元素

2 个答案: