¿Cómo creo un diseño de serpenteo de dos columnas en ASP.NET MVC?

Tengo alrededor de un centenar de elementos de datos de texto corto (este número puede variar sustancialmente) que me gustaría poner en una página y hacer que el navegador los administre en tres columnas dentro de un div, arreglado con los elementos bajando y luego a través, de esta manera:¿Cómo creo un diseño de serpenteo de dos columnas en ASP.NET MVC?

A F L 
B G M 
C H N 
D I O 
E K ...

¿hay una manera de hacer esto como li (o tal vez sólo las líneas individuales), y que el navegador clasifica automáticamente en tres columnas tengan la misma altura, posiblemente usando CSS?

¿Hay problemas de compatibilidad del navegador?

Fuente

2009-07-21 Robert Harvey

Usted ha hablado de "navegador". Creo que pure CSS no es posible. Pero ciertamente puedes hacerlo javascript. ¿También estás buscando opciones en javascript? – xandy

Claro, estoy abierto a Javascript. –

Sin problemas de compatibilidad del navegador:

<% var rows = source.Count() % 3 == 0 ? source.Count/3 : (source.Count/3) + 1; %> 
<table> 
    <% for(int i=0; i<rows; i++) { %> 
    <tr> 
     <td><%= source.Skip(i).FirstOrDefault() %></td> 
     <td><%= source.Skip(i+rows).FirstOrDefault() %></td> 
     <td><%= source.Skip(i+rows*2).FirstOrDefault() %></td> 
    </tr> 
    <% } %> 
</table>

Utilizamos el operador de módulo para hacernos saber si la división es aún o no ... si no lo es, no vamos a añadir una fila extra para las columnas sobrantes. Para obtener más información, consulte http://msdn.microsoft.com/en-us/library/0w4e0fzs.aspx

Por ejemplo mirada en la fuente HTML https://stackoverflow.com/users - que utiliza <table>

Fuente

2009-07-21 05:20:20

Creo que si no eres adverso a esta solución, es probablemente la más preferible. El código resultante será mucho más eficiente que tener que procesarlo desde el lado del cliente con javascript. – Odd

Esto es realmente elegante. Candidato a la respuesta correcta, aunque encontré una solución para el cliente, que publicaré en breve. –

<div style="float: left">A</div> 
<div style="float: left">B</div> 
<div style="float: left">C</div> 
<div style="float: left">D</div> 
<div style="float: left">...</div>

A continuación, colóquelos en un div que tenga su anchura establecida correctamente.

Fuente

2009-07-21 02:35:32 griegs

¿Qué hay de la altura del div externo? ¿Se las arreglará solo? –

¿Cómo sabe que se supone que son tres columnas? –

Sí, debería hacer. No recuerdo haber tenido que establecer la altura. El problema que puede tener es con el contenido y el ancho. por ejemplo: si tiene las columnas a, b, c y luego otra fila de, horndrolic, e, f entonces tendrá columnas impares. Así que establece el ancho de cada uno de los divisores de columna. obviamente haz esto en una etiqueta de estilo. :) – griegs

En el mundo de CSS, esta es la única forma en que sé hacer tres columnas fuera de una tabla, por supuesto.

<html> 
    <div style="width:100px"> 
     <div style="float:left; width:33%;">a</div> 
     <div style="float:left; width:33%;">bsdf</div> 
     <div style="float:left; width:33%;">c</div> 
     <div style="float:left; width:33%;">d</div> 
     <div style="float:left; width:33%;">e</div> 
     <div style="float:left; width:33%;">f</div> 
     <div style="float:left; width:33%;">g</div> 
    </div> 
</html>

Claramente, usted no usaría todas esas etiquetas de estilo, sino que utilizaría un estilo real. Observe el 33% como el ancho.

Probé esto en IE y FirFox y no hay problemas en ninguno de los dos.

Fuente

2009-07-21 02:48:08 griegs

También intenté establecer el ancho del elemento principal en 500 px y todo quedó como tres columnas. – griegs

Mmm, no es bueno. Hace tres columnas, pero se coteja de izquierda a derecha primero. Necesito que se coteja de arriba a abajo primero. –

¿No es solo el orden en el que colocas los divs internos? Estoy bastante seguro, y mi CSS no es de nivel experto, que lo que estás pidiendo que hagas no es factible. Aunque ahora alguien por ahí está obligado a demostrar que estoy equivocado. – griegs

html puede ser (en realidad duerma realmente importa):

<div class="3col_vert"> 
    <div>a</div> 
    <div>b</div> 
    <div>c</div> 
    <div>d</div> 
    ... 
</div>

En javascripts (ejemplo de jQuery en particular), lo que tiene que envolverlos con cols, por lo que el HTML resultante (después de la manipulación de Javascript) se convertirá en:

<div class="3col_vert"> 
    <div class="col_left"> 
     <div>a</div> ... 
    </div> 
    <div class="col_centre"> 
     <div>e</div> ... 
    </div> 
    <div class="col_right"> 
     <div>g</div> ... 
    </div> 
</div>

Jquery a mainpulate será:

var vert_divs = $(".3col_vert div"); 
// Remove them from parent 
$(".3col_vert").empty() 
    .append("<div class='col_left'></div>") // append the wrapper cols to parent 
    .append("<div class='col_center'></div>") 
    .append("<div class='col_right'></div>"); 

// Now place them to the wrappers 
var totalDivs = vert_divs.length; // count number of match divs 

vert_divs.each(function(i) { 
    if (i < totalDivs/3) 
     $(this).appendTo(".3col_vert div.col_left"); 
    else if (i<totalDivs * 2/3) 
     $(this).appendTo(".3col_vert div.col_center"); 
    else 
     $(this).appendTo(".3col_vert div.col_right"); 
});

El c ode arriba no está muy optimizado (estoy seguro de que puede usar muchos algoritmos mejores), pero la idea está allí, se usa javascript para manipular el html en algo como el anterior, colocando el primer 1/3 en la columna de la izquierda, segundo 1/3 al centro, y el resto a la derecha. El último trabajo es usar CSS para convertirlos en 3 columnas, que no voy a tratar aquí, pero hay montones de tutoriales, por ejemplo, this one es uno de esos ejemplos.

Fuente

2009-07-21 04:00:44 xandy

Exactamente lo que estaba comenzando a escribir cuando vi esta respuesta, siempre y cuando el usuario esté familiarizado con jQuery, funcionará muy bien. – Odd

Antes de conocer jquery, no escribo mucho script de cliente, la programación javascript es como abordar la diferencia del navegador en lugar de la productividad. Por cierto, si alguien está familiarizado con otro framework o simplemente lo implementa en javascript, eso está bien, ya que solo manipula el marcado para ayudar a css a hacer su trabajo. – xandy

Gracias, xandy. Ver también mi nueva publicación a continuación. –

No se puede hacer esto en CSS solo - aunque @griegs ha mostrado cómo hacerlo a través luego hacia abajo.

Si siempre quiere 3 columnas esto debería ser fácil con un poco de código del lado del servidor y CSS - básicamente de cada artículo que escribe algo como:

<li>item</li>

Luego, a count/3 y count*2/3 complemento:

</ul><ul>

por lo que terminan con algo como:

<style> 
    .three-column-panel > ul { 
     float:left; width:33%; list-style-type: none; text-indent:0; } 
</style>  

<div class="three-column-panel"> 
    <ul> 
     <li>a</li> 
     <li>b</li> 
     <li>c</li> 
    </ul> 
    <ul> 
     <li>d</li> 
     <li>e</li> 
     <li>f</li> 
    </ul> 
    <ul> 
     <li>g</li> 
     <li>h</li> 
    </ul> 
</div>

Fuente

2009-07-21 07:57:28 Keith

Me gusta la idea de manejar la columna de altura del servidor. Vale la pena escribir un Método de extensión HTMLHelper. –

Después de Xandy sugirió Javascript, hice un poco de google para plugins jQuery, y encontré esto:

columnas de periódicos plugin de jQuery
http://www.webmeisterei.com/petznick/2007/05/16/newspaper-columns-jquery-plugin/

Uso:
Usted necesitará un recipiente con Elementos como

<div id="npContainer"> 
    <div class="npItem">Item1</div> 
    <div class="npItem">Item2</div> 
</div>

... y necesita las Columnas

<div id="npColumn1"></div> 
<div id="npColumn2"></div> 
<div id="npColumn3"></div>

En Javascript a llamarlo:

jQuery().npColumns();

Una página web que utiliza el plugin
http://www.bregenzerwald-news.at/?classifieds=1

Fuente

2009-07-21 13:35:25

Interesante, robert. – xandy

¿Cómo creo un diseño de serpenteo de dos columnas en ASP.NET MVC?

Respuesta

Cuestiones relacionadas