显示两列中的内容（每列50％），如果内容不适合将列移动到下一行并填充水平空间

Question

在我的项目中，我希望以两列（每列50％）显示内容，如果内容不适合，则将列移动到下一行并填充水平空间。

以下两张图片展示了我的意思。

对于简短文字，请将其显示在两列中：

当文本不再适合时，即任一列的宽度超过50％时，在下一行中移动第二列的内容，填充所有可用的水平空间。有点像这样：

这只能用CSS完成吗？

Answer 1

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

Fiddle snippet

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

Answer 2

可以使用flex。

看看我为您制作的 Fiddle 。只需添加更多文字即可查看结果。

只需使用flex-wrap并对内容进行一些调整和证明。

要在跨浏览器环境中使用，请始终使用 Autoprefixer.