是否可以让元素“通过”结构规则？

Question

我将从一个例子开始

.Item {
  width:100px;
  height:100px;
  margin:20px;
  background-color:rgb(255,0,0);
  }

#AllStuffs {
  display:flex;
  flex-direction:row;
  }

<div id="AllStuffs">
  <div class="Item">I am static</div>
  <div id="DynamicTexts">
    <div class="Item">Lets pretend</div>
    <div class="Item">that we are dynamic</div>
  </div>
</div>

基本上，有一个元素可以将动态元素与静态元素（或者可能来自多个来源的动态元素或其他任何内容）分开，在这种情况下是“DynamicTexts”，这对我来说会很方便。

同时，我希望该分隔符元素对文档结构完全不可见并遵守 css 规则，就好像所有“item”类元素都是“AllStuffs”元素的直接子元素，在这种情况下会导致 3 个红色一排箱子。

有没有办法在元素上强制这种“通过”模式？

注意：对假设问题的其他解决方案不感兴趣，只对这种特定方法是否可行感兴趣。

Answer 1

在这里，使用浮动：

.Item {
  width:100px;
  height:100px;
  margin:20px;
  background-color:rgb(255,0,0);
  float: left;
  }
#AllStuffs, #DynamicTexts {
  list-style: none;
  margin: 0;
  padding: 0;
  }
#AllStuffs {
  overflow: auto; // clearfix the floats inside
  }

<ul id="AllStuffs">
  <li class="Item">I am static</div>
  <li>
    <ul id="DynamicTexts">
      <li class="Item">Lets pretend</li>
      <li class="Item">that we are dynamic</li>
    </ul>
  </li>
</ul>

尽管不需要解决您的问题，但我将容器转换为列表，将项目转换为列表项目以改进语义。