Css Styling list elements in two columns

问题

I have a list of items with different width that I would like to display in two columns.

Is it possible to do it only with css?

HTML:

<div class="row-fluid custom-row-margin-30">
        <div class="span12">
            <ul class="thumbnails custom">
                <li class="span6 box1">
                    <p>hola</p>                 
                    <p>hola</p> 
                </li>   
                <li class="span6 box2">
                    <div>hola</div>                 
                </li>   
                <li class="span6 box3">
                    <div>hola</div>                 
                </li>   
            </ul>
        </div>  <!-- span12 -->
    </div> 

CSS:

.box1 {background-color: green}
.box2 {background-color: blue}
.box3 {background-color: red}

Please note, the box1 has a bigger width than box2, for that reason box3 is not displayed in column1 but it moves to column2. Please see a plunker example.

https://plnkr.co/edit/ne2h4wD41vM3d61it6fN?p=preview

回答1:

Add these styles

.thumbnails {
      display: flex;
      flex-wrap: wrap;
}
.row-fluid .span6 {
  margin-left: 0 !important;
}

This should work as you asked

来源：https://stackoverflow.com/questions/50654651/css-styling-list-elements-in-two-columns