¿Puedo pasar divs por la página en lugar de cruzarla?

Si tengo una colección de elementos div, puedo usar CSS para que fluyan por la página y se desborden en la siguiente línea.¿Puedo pasar divs por la página en lugar de cruzarla?

Aquí está un ejemplo sencillo:

<html> 
    <head> 
    <title>Flowing Divs</title> 
    <style type="text/css"> 
     .flow { 
     float: left; 
     margin: 4em 8em; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="flow">Div 1</div> 
     <div class="flow">Div 2</div> 
     <div class="flow">Div 3</div> 
     <div class="flow">Div 4</div> 
     <div class="flow">Div 5</div> 
     <div class="flow">Div 6</div> 
     <div class="flow">Div 7</div> 
     <div class="flow">Div 8</div> 
    </div> 
    </body> 
</html>

Es posible tener los divs fluyen abajo de la página en lugar de a través de ella, por lo que iban a fluir hacia abajo columnas no a lo largo de líneas, pero siguen ocupando el mismo espacio que lo harían si fluyeran?

lo tanto, para el ejemplo anterior, si se fluyeron en dos líneas de cuatro divs, podría conseguir la primera columna para contener Div1 y Div2 en lugar de Div1 y DIV5?

Fuente

2010-03-17 Brabster

No, no creo que esto sea posible. – inkedmn

Entonces, ¿quieres columnas de divs, verdad? Donde 1-4 está en la izquierda, y 5-8 está en la derecha? –

@Arve: idealmente, cuatro columnas, de modo que se ocupa el mismo espacio como si fluyeran en dos líneas. Sin embargo, si eso no es posible y es posible hacer dos columnas como usted describe, me gustaría saber cómo. – Brabster

rápidamente tiró esto juntos .:

#column1 {float:left} 
#column2 {float:left} 
div div{height:100px;width:100px;border:1px solid} 

<div id="column1">  
     <div>1</div> 
     <div>2</div> 
</div> 
<div id="column2"> 
     <div>3</div> 
     <div>4</div> 
</div>

Fuente

2010-03-17 19:34:26 Rob

marca el código y pulsa el botón Código :) De todas formas, esto podría funcionar, pero requiere una gran cantidad de (en mi humilde opinión) CSS unnessecary, además de que es muy ... UN-dinámico. : p –

Hay una gran caja con el título "Cómo formatear" justo al lado del cuadro de texto donde escribe su respuesta. –

Honestamente, hice lo de 4 espacios primero y no funcionó, pero no sé lo que hice mal. – Rob

No, no es posible. La solución más fácil es crear columnas separadas mediante la adición de conteiner-DIVs, y luego agregar contenido a cada columna. Esto también podría generarse dinámicamente con Javascript o en el servidor.

Fuente

2010-03-17 19:15:26

No, no se puede, pero se puede organizarlos como desee mediante el uso de posicionamiento absoluto. Sin embargo, hacerlo significa que tiene que establecer explícitamente la posición de cada elemento, y que por lo general no se desea.

Un simple ajuste a la marca puede hacer este trabajo sin embargo. ¿Es lo siguiente lo que querías ver?

<html> 
    <head> 
    <title>Flowing Divs</title> 
    <style type="text/css"> 
     .container { 
     float:left; 
     } 
     .flow { 
     margin: 4em 8em; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="flow">Div 1</div> 
     <div class="flow">Div 2</div> 
     <div class="flow">Div 3</div> 
    </div> 
    <div class="container"> 
     <div class="flow">Div 4</div> 
     <div class="flow">Div 5</div> 
     <div class="flow">Div 6</div> 
    </div> 
    <div class="container"> 
     <div class="flow">Div 7</div> 
     <div class="flow">Div 8</div> 
    </div> 
    </body> 
</html>

Fuente

2010-03-17 19:44:47

Desafortunadamente no se puede hacer en html/css puros. A continuación se muestra un ejemplo de cómo esto se puede lograr en JavaScript. Se puede hacer más eficiente, pero más difícil de aprender. No he probado en IE/Safari, pero funciona en FF.

Modo de empleo: - Añadir la clase 'contenedor' al contenedor flujo - eso es todo

Disfruta :).

<html> 
<head> 
<title>Flowing Divs</title> 

<style type="text/css"> 
.container { 
    float: left; 
    height: 1px; 
} 

.col { 
    float: left; 
} 

#container-1 { 
} 

.flow { 
    float: left; 
    margin: 4em 8em; 
    width: 200px; 
    height: 100; 
    overflow-y: hidden; 
} 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
</head> 

<body> 

<div id="container-1" class="container"> 
    <div class="flow">Div 1</div> 
    <div class="flow">Div 2</div> 
    <div class="flow">Div 3</div> 
    <div class="flow">Div 4</div> 
    <div class="flow">Div 5</div> 
    <div class="flow">Div 6</div> 
    <div class="flow">Div 7</div> 
    <div class="flow">Div 8</div> 
    <div class="flow">Div 9</div> 
    <div class="flow">Div 10</div> 
    <div class="flow">Div 11</div> 
    <div class="flow">Div 12</div> 
    <div class="flow">Div 13</div> 
    <div class="flow">Div 14</div> 
    </div> 

    <script type="text/javascript"> 

    /** 
    * Setup some event handling and stuff 
    */ 

    // Create flowing container after dom is populated 
    $(document).ready(function() 
    { 
     createFlowingContainer('#container-1'); 
    }); 

    $(window).resize(function() 
    { 
     // Recreate flow for all containers without fixed heights 
     $('.container-autosize').each(function(i, container) 
     { 
      var container = $(container); 

      // Update container dimenions 
      container.height($(window).height());  

      createFlowingContainer(container); 
     }); 
    }); 

    /** 
    * Magical function 
    */ 

    createFlowingContainer = function(container) 
    { 
     var container = $(container); 

     // Columns counter 
     var colNum = 0;  

     // Some more counter vars, these reset when a new column is created 
     var colHeight = 0; 
     var colWidth = 0; 
     var containerWidth = 0; 

     var itemNum = 0; 

     // Get height of container 
     var containerHeight = container.height(); 

     // Has the container height been defined? 1px is the default height (as defined in the css) 
     if (containerHeight == 1) 
     { 
      // Set the container height default value 
      containerHeight = $(window).height(); 

      // Used to resize container on window resize events 
      container.addClass('container-autosize'); 

      // Update container height 
      container.height(containerHeight); 
     } 

     var containerElements = container.children('div :not(.col)'); 

     if (containerElements.length == 0) 
     { 
      containerElements = $('[itemNum]'); 
     } 
     else 
     { 
      container.children('div').each(function(i, o) 
      { 
       $(o).attr('itemNum', itemNum); 

       itemNum++; 
      }); 
     } 

     var containerTmp = container.clone(); 
     containerTmp.html('');  

     containerElements.each(function(i, ele) 
     { 
      var ele = $(ele); 

      // Get the item's height with padding & margins included 
      var eleWidth = ele.width(); 
      var eleHeight = ele.outerHeight(true); 

      // Can the current column fit this item? 
      if ((eleHeight + colHeight) > containerHeight) 
      { 
       // Reset calculated height of column & advance column pointer 
       colHeight = 0; 
       colNum++; 
      } 

      // Get the column container 
      var column = containerTmp.find('.col-' + colNum); 

      // Does the column exist? If not, its a new column and we'll need to create it 
      if (column.length == 0) 
      { 
       column = $('<div class="col col-' + colNum + '"></div>'); 

       // Append column to container 
       containerTmp.append(column); 
      } 

      // Keep track of widest ele in column, used for setting width of container 
      if (eleWidth > colWidth) 
      { 
       colWidth = eleWidth; 
      } 

      column.width(colWidth); 

      // Increment the calculated column height 
      colHeight += eleHeight; 

      // Append element to column 
      column.append(ele); 
     }); 

     container.html(containerTmp.html()); 

     // Calculate container width 
     container.children('.col').each(function(i, o) 
     { 
      containerWidth += $(o).width(); 
     }); 

     container.width(containerWidth); 
    }; 
    </script> 

</body> 
</html>

Fuente

2010-03-17 20:56:51

¿Puedo pasar divs por la página en lugar de cruzarla?

Respuesta

Cuestiones relacionadas