Question

我想在CSS中创建一个框，其水平空间由多个元素共享。这些元素应始终使用该元素的100% width，除非它们会发生冲突，在这种情况下，它们会在所有元素之间平均分配可用宽度。

以下示例显示了2个元素，它们共享容器中的空间。当蓝色的移出红色的高度时，两者都应再次拉伸以使用100％的宽度。我在此示例中使用的是flexbox，以显示在项目中使用width: 100%的意图。但是，如果有不使用flexbox的解决方案，我会很乐意使用它。

html, body {
  background: gray;
}

.col {
  width: 300px;
  height: 150px;
  background: lightgray;
  
  display: flex;
}

.col > div {
  width: 100%;
  height: 50px;
}

.a {
  background: red;
}

.b {
  position: relative;
  background: blue;
  
  top: 0px;
  
  animation: ani 2s infinite;
}

@keyframes ani {
  50% {
    top: 100px;
  }
}

<div class="col">
  <div class="a"></div>
  <div class="b"></div>
</div>

我想知道是否有针对此的纯CSS解决方案。

Answer 1

不确定要达到什么目的，但是如果您有两个div，并且当第二个div达到50px时都希望两个div都达到100％，那么您也应该对容器使用动画。。请让我知道它是否适合您！

html, body {
  background: gray;
}

.col {
  width: 300px;
  height: 150px;
  background: lightgray;
  
  display: flex;
  flex-direction: row;
  animation: anicontainer 2s infinite;
}

.col > div {
  width: 100%;
  height: 50px;
}

.a {
  background: red;
}

.b {
  position: relative;
  background: blue;
  
  top: 0px;
  
  animation: ani 2s infinite;
}

@keyframes ani {
  50% {
    margin-top:-50px;
    top: 100px;
  }
}
@keyframes anicontainer {
  50% {
    flex-direction: column;
  }
}

<div class="col">
  <div class="a"></div>
  <div class="b"></div>
</div>

动态共享多个元素之间的宽度？

1 个答案: