css - 在两列中显示内容(每列 50%)，如果内容不适合将列移至下一行并填充水平空间

Question

在我的元素中，我想在两列中显示内容(每列 50%)，如果内容不适合，则将列移到下一行并填充水平空间。

这里有两张图片可以说明我的意思。

对于短文本，分两列显示:

当文本不再适合时，即任何一列的宽度都超过 50%，将第二列的内容移动到下一行以填充所有可用的水平空间。有点像这样:

这只能用 CSS 来完成吗？

Answer 1

您可以使用flexbox 和white-space: nowrap

Fiddle snippet

堆栈片段

.wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.left,
.right {
  flex: 1 0 50%;
  background: lightgreen;
  white-space: nowrap;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}
.right {
  background: lightblue;
}

<div class="wrapper">

  <div class="left">
   This is a longer text. This is a longer text. 
  </div>
  <div class="right">
  This is a shorter text. 
  </div>
  
</div>

<div class="wrapper">

  <div class="left">
   This is an even longer text. This is an even longer text.
  </div>
  <div class="right">
  This is a shorter text. 
  </div>
  
</div>