CSS - перевод строки после элемента

Question

Проблема, с которой я сталкиваюсь, теперь возникает в автоматизированной форме, сгенерированной JS, которая использует элементы управления, урезанные в DIV. Результирующее 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*/ }

Обратите внимание, что «входы» выше могут быть различными элементами, а выше просто частный случай ".

Проблема:

• Начиная с приведенной выше структуры, я ожидаю, что 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
}

Это позволит организовать ваши деления таким же образом