Question

我一直在尝试找到一种仅用于CSS的解决方案，但是没有想到，所以我想问一下。

给出三个div并排水平堆叠，当一个div溢出到下一行时，如何更改布局，使其切换为垂直堆叠。

我添加了一个带有按钮的代码段，单击该代码段将设置父div元素的宽度。这旨在作为调整窗口大小的示例，以使父元素最终变得太小，以至于所有div都不能显示在同一行上，这时div应该操纵为垂直堆栈。

目前，我正在使用javascript来确定div的高度是否会随着元素调整大小而增加，但是是否只有CSS才是理想的解决方案。

function forceOverflow() {
  let container = document.getElementsByClassName('container')[0];
  if (container.className.indexOf('small') !== -1) {
    container.className = "container";
  } else  {
    container.className = "container small";
  }
}

.container {
  display: flex;
  flex-wrap: wrap;
  background: yellow;
}

.container.small {
  width: 300px;
}

<div class="container">
  <div>Dynamic string 1</div>
  <div>Dynamic string 2</div>
  <div>Dynamic string 3</div>
</div>
<button onClick="forceOverflow()">Force overflow</button>

Answer 1

使用CSS不可能执行这种条件逻辑，因为您需要查询DOM才能做到这一点，而CSS无法做到这一点。

当一个溢出时堆栈div

1 个答案: