如何在没有 `float` 的情况下并排垂直对齐 `<div>`？

Question

要求布局：两个盒子应该并排，但是左边一个里面有三个竖直的盒子，而另一个是空的。这两个盒子应该仍然在顶部垂直对齐。

但是使用我编写的代码，我得到了一个倾斜的布局，请参阅JSFiddle。帮我解决这个问题。

div.left {

  background: blue;

  height: 200px;

  width: 60%;

}

div.right {

  background: green;

  height: 200px;

  width: 30%;

}

.container div {

  display: inline-block;

}

.left div {

  display: block;

}

<div class="container">

  <div class="left">

    <div>hello</div>

    <div>hello</div>

    <div>hello</div>

    <div>hello</div>

  </div>

  <div class="right">

    RIGHT

  </div>

</div>

Answer 1

您可以将flexbox用于此布局。.left {&nbsp; background: blue;&nbsp; flex: 1 1 60%;}.right {&nbsp; background: green;&nbsp; flex: 1 1 30%;}.container {&nbsp; display: flex;&nbsp; color: white;}<div class="container">&nbsp; <div class="left">&nbsp; &nbsp; <div>hello</div>&nbsp; &nbsp; <div>hello</div>&nbsp; &nbsp; <div>hello</div>&nbsp; &nbsp; <div>hello</div>&nbsp; </div>&nbsp; <div class="right">&nbsp; &nbsp; RIGHT&nbsp; </div></div>您可以为此布局使用网格。.left {&nbsp; background: blue;}.right {&nbsp; background: green;}.container {&nbsp; display: grid;&nbsp; grid-template-columns: 2fr 1fr;&nbsp; color: white;}<div class="container">&nbsp; <div class="left">&nbsp; &nbsp; <div>hello</div>&nbsp; &nbsp; <div>hello</div>&nbsp; &nbsp; <div>hello</div>&nbsp; &nbsp; <div>hello</div>&nbsp; </div>&nbsp; <div class="right">&nbsp; &nbsp; RIGHT&nbsp; </div></div>

Answer 2

All is left: 对齐要定位在顶部的元素vertical-aligndiv.left {&nbsp; background: blue;&nbsp; height: 200px;&nbsp; width: 60%;}div.right {&nbsp; background: green;&nbsp; height: 200px;&nbsp; width: 30%;}.container div {&nbsp; display: inline-block;&nbsp; vertical-align: top;}.left div {&nbsp; display: block;}<div class="container">&nbsp; <div class="left">&nbsp; &nbsp; <div>hello</div>&nbsp; &nbsp; <div>hello</div>&nbsp; &nbsp; <div>hello</div>&nbsp; &nbsp; <div>hello</div>&nbsp; </div>&nbsp; <div class="right">&nbsp; &nbsp; RIGHT&nbsp; </div></div>

Answer 3

您可以使用display: flex容器上的属性：.container {&nbsp; &nbsp;display: flex;}在这里，您可以找到您想要的示例。有关 flexbox 属性的更多信息，您可以在此处找到解释的完整指南。