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>

虽然不需要解决您的问题，但我将容器转换为列表和项目以列出项目以改善语义。

Answer 2

我不确定我是否理解你的描述。但根据第一个答案中的解决方案，我在flexbox中做了类似的事情：

.Item {
  width:100px;
  height:100px;
  margin:20px;
  background-color:rgb(255,0,0);
  }

#AllStuffs {
  display:flex;
  flex-direction:row;
}
#DynamicTexts {
  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>

Answer 3

您希望动态框不在DOM中。例如，您想将以下css规则应用于所有框，对吧？

AllStuffs>Item
{
    color: green;
}

在这种情况下，没有选项可以绕过DynamicText元素。要解决此问题，您必须使用JS，因为您要更改网站的DOM。

如果您只想更改浮动，请参阅其他答案。

希望这是，你要求的。

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

3 个答案: