外部 div 的边框取决于内部内容

Question

我有一个 div 包装器

.outter

，它可以有任意数量的

.inner-wrapper

div。它们有任意数量的

.element

div。从一个级别到另一个级别，元素的数量要么相同，要么更少。这在底部创建了一种金字塔。

我想给

.outter

包装器一个边框和/或盒子阴影。应直接描绘

.inner-wrapper

的轮廓。重要的是，红色和蓝色元素接触的地方不应该有边界。我不知道这是否可以在没有使用 JS 进行任何复杂计算的情况下实现。

正如我所说，红色和蓝色也可能具有相同的宽度，即具有相同数量的元素。但是，下部

.inner-wrapper

元素永远不会比上部

.inner-wrapper

元素拥有更多元素。

.outter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  border-top: unset;
  overflow: hidden;
  width: auto;
}

.inner-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.element {
  width: 100px;
  height: 100px;
  background: blue;
}

.element.red {
  background: red;
}

<div class="outter">
  <div class="inner-wrapper">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="inner-wrapper">
    <div class="element red"></div>
    <div class="element red"></div>
  </div>
</div>

这就是它的主要外观：黑色的东西是整个东西中所需的无聊东西。

Answer 1

要达到使 .outter 包装器的边框遵循 .inner-wrapper div 的轮廓的预期效果，而不在红色和蓝色元素接触的地方创建边框，您可以使用带有内嵌阴影的 box-shadow 属性。这将创建跟随内部包装器的边框效果，同时避免相邻元素之间的边框。

.outter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  overflow: hidden;
  width: auto;
  position: relative;
  padding: 10px; /* adjust padding as needed */
}

.inner-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.element {
  width: 100px;
  height: 100px;
  background: blue;
}

.element.red {
  background: red;
}

/* Add the following for border effect */
.outter::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 0 2px black; /* Adjust the shadow color and width as needed */
  z-index: -1;
}

这将为 .outter 包装器创建一个边框效果，该效果遵循 .inner-wrapper div 的轮廓，而不在相邻的红色和蓝色元素之间创建边框。根据需要调整盒子阴影属性以达到所需的视觉效果。