显示成对的div

Question

我需要在每一行的两对中显示div但是当div的宽度太长时，则长div应该放在下一行中，而另一个小div应该放在空位中在线以上。

＆＃13;

＆＃13;

.items {
  overflow: hidden;
}

.items .item {
  float: left;
  width: 50%;
  box-sizing: border-box;
  background: #e0ddd5;
  color: #171e42;
}

＆＃13;

<div class="items">
  <div class="item"> AAX </div>
  <div class="item"> G-TEST </div>
  <div class="item"> AGENCY </div>
  <div class="item"> Y2SP </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用Flexbox而不是使用花车。

.items {
    overflow: hidden; 
    display: flex;
    flex-wrap: wrap;
}