简单的问题 - 制作第二个UL列以显示第一个列

Question

我创建了一个无序的列表，并将其元素分为两个不同的类：x1和x2。

我想网站以与第一个相同的高度显示第二列（x2）的元素（x2），也是旁边的元素（就像旧书中的文本列一样）。

到目前为止，我已经在CSS上尝试过，但没有成功：

• .x2 {Margin-Bottom：12px;}
• 显示：内联芬太语

有什么想法？

 
 .x1 {
    -webkit-columns: 100px 1; /* Chrome, Safari, Opera */
    -moz-columns: 100px 1; /* Firefox */
    columns: 100px 1;
}
 .x2 {
    -webkit-columns: 100px 1; /* Chrome, Safari, Opera */
    -moz-columns: 100px 1; /* Firefox */
    columns: 100px 1;
	margin-left:100px;
  }

<ul>
<li class="x1">a</li>
<li class="x1">b</li>
<li class="x1">c</li>
<li class="x1">d</li>
<li class="x1">e</li>
<li class="x1">f</li>
<li class="x1">g</li>
<li class="x1">h</li>
<li class="x1">i</li>
<li class="x1">j</li>
<li class="x1">k</li>
<li class="x2">l</li>
<li class="x2">m</li>
<li class="x2">n</li>
</ul>

Answer 1

plunker演示：https：//plnkr.co/edit/szasnobnyta0jpcg5iwh？p = preview

HTML
<ul>
<div class='container' ><li class="x1">a</li>
<li class="x1">b</li>
<li class="x1">c</li>
<li class="x1">d</li>
<li class="x1">e</li>
<li class="x1">f</li>
<li class="x1">g</li>
<li class="x1">h</li>
<li class="x1">i</li>
<li class="x1">j</li>
<li class="x1">k</li></div>
<div class='container' >
<li class="x2">l</li>
<li class="x2">m</li>
<li class="x2">n</li>
</div>
</ul>
css
 .x1 {
    -webkit-columns: 100px 1; /* Chrome, Safari, Opera */
    -moz-columns: 100px 1; /* Firefox */
    columns: 100px 1;
    clear:right;
}
 .x2 {
    -webkit-columns: 100px 1; /* Chrome, Safari, Opera */
    -moz-columns: 100px 1; /* Firefox */
    columns: 100px 1;
    margin-left:100px;
    clear:right;
  }
  .container
  { float:left; width:auto;}

Answer 2

读取"左>右> down"解决方案：

您可以将LI元素强制仅具有50％的宽度，然后将其分成2列。

ul {
  width: 500px;
}
li {
  float: left;
}
#twoCols li {
  width: 50%;
}

降低每个列表项目的宽度将允许其具有2列以上。例如，如果您的目标是3列33％。

查看我的小提琴：https://jsfiddle.net/m35o8o9q/

读取" top> down>右"解决方案

您还可以使用其他一些CSS通过不同的阅读顺序来实现这一目标：

#twoCols {
  -moz-column-count: 2;
  -moz-column-gap: 60px;
  -webkit-column-count: 2;
  -webkit-column-gap: 60px;
  column-count: 2;
  column-gap: 60px;
}

当然，如果需要，更改列计数编号将导致更多列。

这是这种方法的小提琴：https：//jsfiddle.net/yn3m5vnc/