2

I apologize if I have not formulated the question well, I hope to make myself understood. basically I have a list of elements, these are distributed in each line. I would like that when this line is going to exceed the total size of the div, the list will continue in the space available in front.

enter image description here

<div>
  <ul>
    <li>
      1  
    </li>
    <li>
      2  
    </li>
    <li>
      3  
    </li>
    <li>
      4  
    </li>
    <li>
      5  
    </li>
    <li>
      6
    </li>      
  </ul>
</div>

div
{ 
 border: 1px solid red;
 height: 100px;
 width:300px;
}

how can I do it?

https://jsfiddle.net/ug0f38b1/

yavg
  • 2,761
  • 7
  • 45
  • 115
  • 1
    Possible duplicate of [How to display an unordered list in two columns?](https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns) – Chris Tapay Feb 14 '19 at 02:29
  • You can use the `columns` module to achieve the desired effect. Check for a complete explanation on the [question link](https://stackoverflow.com/a/14745429/7630248) included in the previous comment. – Chris Tapay Feb 14 '19 at 02:33
  • @ChrisTapay but I do not want to distribute my content evenly in columns. simply the last item in the other column .. – yavg Feb 14 '19 at 03:05

2 Answers2

1

I'm using flexbox to solve this with the direction set to column. You need the height of the ul to fill the parent container so it knows when to break.

The items are naturally distributed as the list grows. enter image description here

div {
  border: 1px solid red;
  height: 100px;
  width: 300px;
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  margin: 0;
}
<div>
  <ul>
    <li>
      1
    </li>
    <li>
      2
    </li>
    <li>
      3
    </li>
    <li>
      4
    </li>
    <li>
      5
    </li>
    <li>
      6
    </li>
  </ul>
</div>

jsFiddle

Adjusting column spacing

One nice thing about using flexbox for this is that we can set the ul to be inline-flex which allows easy control over the column spacing.

enter image description here

jsFiddle

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
0

A combination of both columns and column-fill can be used. Check the example below.

div {
  border: 1px solid red;
  height: 100px;
  width: 300px;
  padding: 1rem;
}

ul {
  margin: 0;
  height: 100%;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}
<div>
      <ul>
        <li>
          1  
        </li>
        <li>
          2  
        </li>
        <li>
          3  
        </li>
        <li>
          4  
        </li>
        <li>
          5  
        </li>
        <li>
          6
        </li> 
        <li>
          7  
        </li>
        <li>
          8
        </li> 
      </ul>
    </div>
Chris Tapay
  • 1,004
  • 10
  • 21