Tengo una lista como esta:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

Y quiero mostrarles como esta foto ingrese la descripción de la imagen aquí

* de esa manera Al principio, complete la primera columna y luego la segunda y etc.

2
majid ghafoorzade 17 ene. 2018 a las 08:57

3 respuestas

La mejor respuesta

Utilice column-count:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 2;
}
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

El número de mi columna es dinámico y puede cambiar. Pero hay 3 elementos en una columna (máx.).

Utilice flex:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 60px; /* 60 / 3 = 20 */
  display: flex;
  flex-flow: column wrap;
}

ul > li {
  height: 20px;
}
<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>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

Sin embargo, tendrá que agregar algunos height fijos.

5
Vucko 17 ene. 2018 a las 06:20

Con jQuery, puedes hacer esto dinámico.

$(document).ready(function() {
  var items = $("ul li").length;
  $("ul").css("column-count", Math.ceil(items / 3));
});
ul {
  list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

Si quieres esto en puro JS

var list = document.querySelector("ul");
var items = document.querySelectorAll("ul li").length;
list.setAttribute("style", "column-count :" + Math.ceil(items / 3));
ul {
  list-style-type: none;
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>
0
Sankar 17 ene. 2018 a las 06:23

Prueba a continuación: https://www.w3schools.com/cssref/tryit.asp?filename= trycss3_columns

ul {columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;}
ul li {list-style:none;}
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>
0
Saravana 17 ene. 2018 a las 06:22