Siéntete libre de compartir nuestro espacio y códigos con tus amigos, necesitamos tu ayuda para ampliar nuestra comunidad.
Solución:
Navegadores modernos
Aproveche el módulo de columnas css3 para respaldar lo que está buscando.
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS:
ul
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
http://jsfiddle.net/HP85j/8/
Navegadores heredados
Desafortunadamente, para el soporte de IE, necesitará una solución de código que involucre JavaScript y manipulación de dom. Esto significa que cada vez que cambie el contenido de la lista, deberá realizar la operación para reordenar la lista en columnas y volver a imprimirla. La siguiente solución usa jQuery por brevedad.
http://jsfiddle.net/HP85j/19/
HTML:
- A
- B
- C
- D
- E
- F
- G
JavaScript:
(function($)
var initialContainer = $('.columns'),
columnItems = $('.columns li'),
columns = null,
column = 1; // account for initial column
function updateColumns()
column = 0;
columnItems.each(function(idx, el)
if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx))
column += 1;
$(columns.get(column)).append(el);
);
function setupColumns()
columnItems.detach();
while (column++ < initialContainer.data('columns'))
initialContainer.clone().insertBefore(initialContainer);
column++;
columns = $('.columns');
$(function()
setupColumns();
updateColumns();
);
)(jQuery);
CSS:
.columns
float: left;
position: relative;
margin-right: 20px;
EDITAR:
Como se indica a continuación, esto ordenará las columnas de la siguiente manera:
A E
B F
C G
D
mientras que el OP solicitó una variante que coincida con lo siguiente:
A B
C D
E F
G
Para lograr la variante, simplemente cambie el código a lo siguiente:
function updateColumns()
column = 0;
columnItems.each(function(idx, el)
if (column > columns.length)
column = 0;
$(columns.get(column)).append(el);
column += 1;
);
Estaba viendo la solución de @jaider que funcionó, pero estoy ofreciendo un enfoque ligeramente diferente con el que creo que es más fácil trabajar y que he visto que es bueno en todos los navegadores.
ul
list-style-type: disc;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
list-style-position: inside;//this is important addition
De forma predeterminada, la lista desordenada muestra la posición de la viñeta en el exterior, pero luego, en algunos navegadores, causaría algunos problemas de visualización según la forma en que el navegador presenta su sitio web.
Para que se muestre en el formato:
A B
C D
E
etc. use lo siguiente:
ul li
float: left;
width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
ul
list-style-type: disc;
Esto debería resolver todos sus problemas con la visualización de columnas. Todo lo mejor y gracias @jaider ya que su respuesta ayudó a guiarme a descubrir esto.
Intenté publicar esto como un comentario, pero no pude hacer que las columnas se mostraran correctamente (según su pregunta).
Estás pidiendo:
AB
CD
mi
... pero la respuesta aceptada como solución volverá:
ANUNCIO
SER
C
... entonces la respuesta es incorrecta o la pregunta lo es.
Una solución muy simple sería establecer el ancho de su
- y luego flotar y establecer el ancho de su
artículos como ese
- A
- B
- C
- D
- E
ul
width:210px;
li
background:green;
float:left;
height:100px;
margin:0 10px 10px 0;
width:100px;
li:nth-child(even)
margin-right:0;
Ejemplo aquí http://jsfiddle.net/Jayx/Qbz9S/1/
Si su pregunta es incorrecta, entonces se aplican las respuestas anteriores (con una corrección de JS por falta de soporte de IE).
Finalizando este artículo puedes encontrar las acotaciones de otros sys admins, tú además eres capaz insertar el tuyo si te apetece.