对齐 HTML 中的多个元素答案

【问题标题】：Aligning multiple elements in HTML对齐 HTML 中的多个元素
【发布时间】：2016-07-24 03:43:45
【问题描述】：

我对 HTML 比较陌生，我已经在谷歌上搜索了一段时间，但无法找到一些东西，或者我的搜索词有误。

无论如何，我对边框布局（北、南、西、东、中）很熟悉，但我不明白如何在不同的事情上对齐我的元素。

例如：

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

可以用边框布局来实现类似上面的效果吗？还是我错过了什么？

我想出了另一个 StackOverflow post，但提到的 css 代码使我的框相互重叠。

【问题讨论】：

在 css 中使用 flex 属性。 stackoverflow.com/questions/36530458/…
@ShubhamKhatri 谢谢你的朋友！正是我想要的！我只是不知道这个词。
@ShubhamKhatri 我已经玩了一段时间了，但我无法塑造它，因为我不完全理解这段 CSS 代码。你能再帮我一些忙吗？

标签： html css

【解决方案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; 将导致垂直弯曲显示。

希望我解释得当。

【讨论】：

【解决方案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>

【讨论】：