UL CSS Columns - 排列列高度以匹配多行答案

【问题标题】：UL CSS Columns - Line up columns height to match if multiple linesUL CSS Columns - 排列列高度以匹配多行
【发布时间】：2018-07-04 20:40:07
【问题描述】：

我目前正在使用 CSS 列，为无序列表创建 2 列布局。代码如下：

HTML

<div class="meta-data">
   <ul> 
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Case Study</strong> Case Study Here </li>        
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Sector</strong> Sector Here </li>
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Client</strong> Client Here </li>
     <li><i class="fa fa-chevron-right fa-xs"></i><strong>Value</strong> Value Here </li>
     <li><i class="fa fa-chevron-right fa-xs"></i><strong>Programme Duration</strong> Programme Duration Here </li>
     <li><i class="fa fa-chevron-right fa-xs"></i><strong>Current Status</strong> Current Status Here </li>
  </ul>
</div>

CSS

.meta-data ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

这很好用。但是，如果任何 li 内容包含 2 行或更多行，它会抛出第 2 列项目符号点，因此它们不会全部水平排列...

例如：

Case Studies:  This goes onto       Value:  Value Here
two lines
                                    Programme Duration:  Duration here.
Sector:  Sector here. 
                                    Current Status:  Current Status here.
Client:   Client Here

这看起来很乱。

我宁愿它显示为：

Case Studies:  This goes onto       Value:  Value Here
two lines

Sector:  Sector here.               Programme Duration:  Duration here.

Client:   Client Here               Current Status:  Current Status here.

这是否可以通过 CSS 列设置轻松实现，还是我需要以不同的方式重新编码？

【问题讨论】：

将 flex 与 flex-wrap 一起使用，但不幸的是，您需要并排执行第 1 项和第 2 项，而不是先填充一列，然后再移动到下一列
我认为使用columns 是不可能的，但不确定。您可以使用flexbox 实现这种布局。见：developer.mozilla.org/en-US/docs/Web/CSS/…
这个要求基本上与 CSS 列的工作方式相矛盾。

标签： html css html-lists

【解决方案1】：

我没有看到使用列属性的方法，您可以使用css grid

.meta-data ul {
    display:grid;
    grid-template-columns: 300px 300px;
    grid-column-gap:10px;
}

<div class="meta-data">
   <ul> 
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Case Study</strong> Case Study Here Case Study HereCase Study</li>        
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Sector</strong> Sector Here </li>
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Client</strong> Client Here </li>
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Value</strong> Value Here </li>
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Programme Duration</strong> Programme Duration Here  </li>
      <li><i class="fa fa-chevron-right fa-xs"></i><strong>Current Status</strong> Current Status Here         </li>
  </ul>
</div>

【讨论】：