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 
* de esa manera Al principio, complete la primera columna y luego la segunda y etc.
2
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
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
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
17 ene. 2018 a las 06:22