css: сортировка divs / lis по двум столбцам

Question

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

<div id="container">
    <ul>
        <li>foo</li>
        <li>bar</li>
        <li class="num">1</li>
        <li class="num">2</li>
        <li>baz</li>
    </ul>
</div>

Прямо сейчас я достигаю этого несколько, используя поля с помощью следующего css:

#container {
    width: 500px;
    margin: auto;   
}

li {
    float: left;
    width: 200px;
    background-color: #eee;
    margin-bottom: 2px;
    margin-right: 300px;
}

.num {
    float: right;
    margin-right: 0px;
    margin-left: 300px;
}

, в результате чего

http://jsfiddle.net/he13vug4/

Что может быть более элегантным способом для достижения этой цели?

Как я могу сделать так, чтобы числа "начинались" (с точки зрения вертикального положения) уже помимо "bar" или даже "foo"?(Следующее слово должно начинаться только с цифр).То есть я бы хотел

или

вместо

Answer 1

Используйте только плавающее влево и играйте с клиром и полем, как показано ниже:

#container {
  width: 500px;
  margin: auto;
}
ul {
 list-style:none;
}

li {
  float: left;
  width: 200px;
  background-color: #eee;
  margin-bottom: 2px;
}
li + li:not(.num) {
  clear:both;
}
li + li.num {
  margin-left:10px;
}
li.num + li.num {
  margin-left:210px;
}

<div id="container">
  <ul>
    <li>foo</li>
    <li>bar</li>
    <li class="num">1</li>
    <li class="num">2</li>
    <li>baz</li>
    <li>baz</li>
    <li class="num">1</li>
    <li class="num">2</li>
    <li class="num">3</li>
    <li>baz</li>
    <li>baz</li>
  </ul>
</div>

Answer 2

Они должны быть отсортированы в два столбца рядом

Вам нужна поддержка старых браузеров?Если нет, CSS Grid может вам помочь

Результат

#container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  gap: 10px;
  width: 500px;
  margin: auto;
  list-style: none;
}

li {
  background-color: #eee;
}

.word {
  grid-column: 1;
}

.num {
  grid-column: 2;
}

<ul id="container">
  <li class="word">foo</li>
  <li class="word">bar</li>
  <li class="num">1</li>
  <li class="num">2</li>
  <li class="word">baz</li>
</ul>

И тот же код на JSFiddle