CSS：将div / lis分为两列

Question

假设元素有两种，我们说单词和数字。它们应分为两列。例如，我使用的是列表项，但我不介意将其更改为div或其他有帮助的东西。

 _this.model.find({ event_ground: req.body.event_ground,event_date_time : {"$gte":req.body.event_date_time},event_end_time : {"$gte" :req.body.event_date_time } }, 

现在，我通过使用带有以下css的边距来实现这一点：

<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>

导致

http://jsfiddle.net/he13vug4/

实现这一目标的更优雅的方式是什么？

我如何使数字“开始”（就垂直位置而言）除“ bar”甚至“ foo”之外？ （但是，下一个单词只能在数字下方开始）。也就是说，我想要

或

代替

Answer 1

  

它们应该并排分为两列

您需要对旧版浏览器的支持吗？如果没有，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

上的相同代码

Answer 2

仅使用左浮球，并像下面这样以清晰的边距进行比赛：

#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>