javascript - CSS - 在元素后放置换行符

Question

我现在面临的问题发生在 JS 生成的自动表单中，该表单使用 DIV 中 trim 的控件。生成的 HTML 如下所示:

<div id="E0" style="width:200px;" class="FLD">
    <div style="flex: initial;">Val A：</div>
    <input type="text" style="flex: 1 1 auto;">
</div>
<div id="E1" style="width: 600px;" class="FLD" lf="1">
    <div style="flex: initial;">Val B：</div>
    <input type="text" style="flex: 1 1 auto;">
</div>
<div id="E2" style="width: 400px;" class="FLD">
    <div style="flex: 1 1 auto;">Val C：</div>
    <input style="width:60px; flex:initial;" type="text">
</div>

相关的CSS:

.FLD{ display:inline-flex; flex-direction:row; }
.FLD[lf]::after{ /* The issue described below*/ }

请注意，上面的“输入”可能是不同的元素，上面只是“私有(private)情况”。

问题:

• 从上面的结构来看，我希望 DIV“E0”和 DIV“E1”位于同一行，而“E2”位于下面的单独行中(至少假设父容器足够宽)。
• DIV 将全部内联显示(因为默认情况下我希望它们像这样)。但是，如果设置了“lf”属性(也可以通过 JS 内部属性设置)，则实际上会在 DIV 后面添加
  元素。
• 如果我在 DIV 之后创建
  元素，如果我想在一个命令中删除 DIV 及其“
  ”，则会出现问题 - 因为它们成为 2 个单独的元素 - 正如这出现在 SPA 中，我想要一个干净的删除函数或隐藏函数来仅处理该元素，而不考虑“尾随”。
• 如果我使用“display:flex;”而不是仅针对某个特定元素的“display:inline-flex”，这种情况将变成单独行中的所有 DIV(不是恰好位于中间元素的内联元素，将导致前一个元素位于顶部，下一个元素位于其下方) )。
• 我想使用的最后一个方法是 .FLD[lf]::after{ content:'' } 选择器 - 但是接下来，我的问题来了:

CSS 中是否有可能在 DOM 元素之后以某种方式添加换行符(类似于“
”)？ 我尝试过“content”，但它似乎仅适用于文本字符串，所以即使“\n”也没有做我想要的事情。我相信这是不可能的，但也许我错了，还有另一种方法......

Answer 1

我认为你所问的问题是不可能的。但是...

您可以组合使用 float 和clear css 属性:

#E0, #E1, #E2{
  float: left;
}
#E2{
  clear: left
}

这将以类似的方式排列你的 div