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.
3 respuestas
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.
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>
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>
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].