如何在没有 `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 {

  background: blue;

  flex: 1 1 60%;

}

.right {

  background: green;

  flex: 1 1 30%;

}

.container {

  display: flex;

  color: white;

}

<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>

您可以为此布局使用网格。

.left {

  background: blue;

}

.right {

  background: green;

}

.container {

  display: grid;

  grid-template-columns: 2fr 1fr;

  color: white;

}

<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 2

All is left: 对齐要定位在顶部的元素vertical-align

div.left {

  background: blue;

  height: 200px;

  width: 60%;

}

div.right {

  background: green;

  height: 200px;

  width: 30%;

}

.container div {

  display: inline-block;

  vertical-align: top;

}

.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 3

您可以使用display: flex容器上的属性：

.container {

   display: flex;

}

在这里，您可以找到您想要的示例。

有关 flexbox 属性的更多信息，您可以在此处找到解释的完整指南。