UL CSS Columns - выравнивают высоту столбцов, чтобы они соответствовали нескольким строкам - PullRequest
Новая
       9

UL CSS Columns - выравнивают высоту столбцов, чтобы они соответствовали нескольким строкам

0 голосов
/ 04 июля 2018

В настоящее время я использую столбцы 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, или мне нужно перекодировать это иначе?

1 Ответ

0 голосов
/ 04 июля 2018

Я не вижу способа сделать это с помощью свойства столбца, вы можете использовать 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>
...