CSS:如何使列适合行

Question

我有一些 DIV，我需要将它们显示在 2 个相等的列中。如果其中一个 DIV 大于 50%，则所有 DIV 应显示在 1 列中 例如我有这个 - jsfiddle.net/w2m0sjav/ 我应该像这样显示它 - jsfiddle.net/sxmp8bw0/ 如果所有 DIV 都小于它应该看起来的样子 - jsfiddle.net/r4L0g5eb/

#container {
  width: 100%;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
}
#container .item {
    border-style: solid;
    min-width: 40%;
    margin: 10px;
    padding: 10px;
}

<div id="container">
  <div class="item">small answer</div>
  <div class="item">small answer</div>
  <div class="item">very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very big answer</div>
  <div class="item">small answer</div>
  <div class="item">small answer</div>
</div>

Answer 1

就像评论中已经提到的一些人一样，我认为单独使用 CSS 是不可能的，但是您可以使用一点 JS 来实现，片段:

const container = document.getElementById('container');
const items = document.querySelectorAll('#container .item');

const containerHalfWidth = parseInt(getComputedStyle(container).width, 10) / 2;

items.forEach((item) => {
let itemWidth = parseInt(getComputedStyle(item).width, 10);
    if (itemWidth > containerHalfWidth) {
    // try commenting out this line below
    container.classList.add('one-column');
  }
});

#container {
  text-align: left;
  display: flex;
  flex-wrap: wrap;
}

#container .item {
  border-style: solid;
  box-sizing: border-box;
  /* we want the cards to make 2 full columns inside container
     but also have 10px margins on either side of them */
  min-width: calc(50% - 20px);
  margin: 10px;
  padding: 10px;
}

#container.one-column .item {
  width: calc(100% - 20px);
}

<div id="container">
  <div class="item">small answer</div>
  <div class="item">small answer</div>
  <div class="item">very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very-very big answer</div>
  <div class="item">small answer</div>
  <div class="item">small answer</div>
</div>