Плавающие с обеих сторон отдельно, не мешая

Question

Я хотел бы украсить и сформировать левую и правую границы моего текста, используя свойства float и clear. Для начала у меня есть эта разметка, которая выглядит как левая и правая ступеньки лестницы должны начинаться в верхней части страницы. Тем не менее, лестница не выровнена по вертикали; вторая лестница, кажется, всегда начинает рисовать со второго до последнего шага на другой стороне.

<div style="float: left; clear: left; background: green;">Left</div>
<div style="float: left; clear: left; background: green;">Left Two</div>
<div style="float: left; clear: left; background: green;">Left Number Three</div>

<div style="float: right; clear: right; background: red;">Right</div>
<div style="float: right; clear: right; background: red;">Right Two</div>
<div style="float: right; clear: right; background: red;">Right Number Three</div>

... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .

Результат (такой же, как в Chrome + Firefox):

Я бы хотел, чтобы обе ступени начинались с самого начала, как они, кажется, и должны, поскольку я очищаю поплавки только с той стороны, на которой они находятся. Обратите внимание, что я не просто формирую границы, я также показываю важные вещи на фасонных сторонах.

Answer 1

Вы можете подделать это, очистив float на 3 последних предметах и ​​использовать direction, чтобы получить правильное выравнивание и для последних 3 предметов.

пример из списка:

/* required */

.stairCcase {
  direction: rtl;
}

.stairCcase li {
  float: left;
  clear: left;
  direction: ltr;
}

.stairCcase :nth-child(3)~li {
  float: none;
  clear: none;
  display: table; /* or width:max-content instead display */
}


/* reset & styles for demo*/

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul {
  width: 10em;
  margin: auto;
}

li {
  background: green;
  padding:0.25em;
}

li:nth-child(3)~li {
  background: red;
}

<ul class="stairCcase">
  <li>0 </li>
  <li>0 0 </li>
  <li> 0 0 0</li>
  <li>1</li>
  <li>1 1</li>
  <li>1 1 1</li>
</ul>

несколько ресурсов о float: https://css-tricks.com/?s=float&orderby=relevance&post_type=post%2Cpage%2Cguide & direction https://css-tricks.com/?s=direction&orderby=relevance&post_type=post%2Cpage%2Cguide

---

для такого макета, вы должны рассмотреть использование сетки display.

Пример ниже

ul {
  display: grid;
  grid-template-areas: 
  "left    .     .   .   .      .    right " 
  "left2 left2   .   .   .    right2 right2" 
  "left3 left3 left3 . right3 right3 right3"
}

li {
  grid-area: left;
  border:solid;
}

li:nth-child(2) {
  grid-area: left2
}

li:nth-child(3) {
  grid-area: left3
}

li:nth-child(4) {
  grid-area: right
}

li:nth-child(5) {
  grid-area: right2
}

li:nth-child(6) {
  grid-area: right3
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
  counter-reset: lis
}

li:before {
  counter-increment: lis;
  content: counter(lis);
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

https://css-tricks.com/snippets/css/complete-guide-grid/#prop -grid-template-областях

Answer 2

Самый простой способ решить проблему, просто поменять местами строки следующим образом: зеленый, красный, зеленый, красный, зеленый, красный. Этот код работает правильно:

<div style="float: left; clear: left; background: green;">Left</div>
<div style="float: right; clear: right; background: red;">Right</div>
<div style="float: left; clear: left; background: green;">Left Two</div>
<div style="float: right; clear: right; background: red;">Right Two</div>
<div style="float: left; clear: left; background: green;">Left Number Three</div>
<div style="float: right; clear: right; background: red;">Right Number Three</div> 

Answer 3

Плавающий элемент не позиционируется независимо от потока документов - он расположен вертикально, где бы ни находился предыдущий элемент (будь то блок, плавающий или нет или встроенный контент) - в потоке элементов внутри документа.

То, что вы ищете (плавающие элементы с плавающим вокруг них содержимым, но независимо друг от друга, независимо от потока документов), в принципе невозможно.

РЕДАКТИРОВАТЬ:

Вот код из комментария ниже, с более длинным текстом, чтобы показать, что я имею в виду:

div,
p {
  font-size: 24px;
  margin: 0;
  text-align: center;
}

<div style="float: left; clear: left; background: green;">Left</div>
<div style="float: right; clear: right; background: red;">Right</div>
<p>Some text in between</p>
<div style="float: left; clear: left; background: green;">Left Two</div>
<div style="float: right; clear: right; background: red;">Right Two</div>
<p>Some more text in between. Some more text in between,  in between,  in between. Some more text in between. </p>
<div style="float: left; clear: left; background: green;">Left Number Three</div>
<div style="float: right; clear: right; background: red;">Right Number Three</div>
<p>And again less text in between.</p>

Таким образом, подобный обходной путь может работать только с очень небольшим количеством контента / текста (или ни одного) между ними. (Обратите внимание, что я установил p s margin s на 0, в противном случае между "шагами" будет пробел.)