¿Cómo puedo hacer un float top con CSS?

Question

Sé que CSS solo admite valores izquierdos y derechos para la propiedad flotante, pero ¿existe alguna técnica para implementar una tapa flotante? Voy a intentar de explicar. Tengo el siguiente código:

<div style="float:left"> 
<div style="float:left"> 
<div style="float:left"> 
.... 

Con este código cada div se hace flotar a la izquierda hasta que se alcanza el límite derecho de la página. Quiero hacer lo mismo pero verticalmente, de modo que cada div se coloque en la parte inferior de la anterior y luego, cuando se alcance el límite inferior de la página, se cree una nueva columna. ¿Hay alguna manera de hacer esto usando solo CSS (y tal vez editar el código HTML)?

Answer 1

La única forma de hacerlo con CSS es usar CSS 3, que no funcionará en todos los navegadores (solo la última generación como FF 3.5, Opera, Safari, Chrome).

hecho con CSS 3 que hay esta propiedad impresionante: la columna de recuento que se puede utilizar de esta manera:

#myContent{ 
    column-count: 2; 
    column-gap: 20px; 
    height: 350px; 
} 

Si #myContent está terminando sus otros divs.

Más información aquí: http://www.quirksmode.org/css/multicolumn.html

Como se puede leer allí, hay serias limitaciones en el uso de esta. En el ejemplo anterior, solo se agregará una columna a otra si el contenido se desborda. en mozilla puede usar la propiedad de ancho de columna que le permite dividir el contenido en tantas columnas como sea necesario.

De lo contrario, tendrá que distribuir el contenido entre diferentes divs en Javascript o en el back-end.

Answer 2

No hay float:top, solamente float:left y float:right

Si desea mostrar div debajo de uno al otro que tendría que hacer:

<div style="float:left;clear:both"></div> 
<div style="float:left;clear:both"></div> 

Answer 3

Creo que la mejor manera de lograr lo que eres hablar es tener un conjunto de divisiones que serán tus columnas, y completarlas en la forma que describes. Luego llene esos divs verticalmente con el contenido del que está hablando.

Answer 4

Usted puede ser capaz de hacer algo con los selectores de hermanos ej .:

div + div + div + div{ 
float: left 
} 

No probado pero esto podría flotar el 4º div dejaron tal vez haciendo lo que quiere. Nuevamente no totalmente compatible.

Answer 5

<div class="block blockLeft">...</div> 
<div class="block blockRight">...</div> 
<div class="block blockLeft">...</div> 
<div class="block blockRight">...</div> 
<div class="block blockLeft">...</div> 
<div class="block blockRight">...</div> 

block {width:300px;} 
blockLeft {float:left;} 
blockRight {float:right;} 

Pero si el número de elementos de div no es fijo o no sabes lo mucho que podría ser, todavía necesita JS. utilice jQuery :even, :odd

Answer 6

Hugogi Raudel se le ocurrió una forma interesante de lograr esto por CSS.supongamos que aquí está nuestro HTML marcado:

<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> 
</ul> 

se puede lograr una columna de 3 filas con este código CSS:

li:nth-child(3n+2){ 
    margin: 120px 0 0 -110px; 
} 

li:nth-child(3n+3) { 
    margin: 230px 0 0 -110px; 
} 

Y aquí está el resultado final:

Lo que estamos haciendo aquí está agregando un margen apropiado para cada artículo en la fila. Esta limitación de enfoque es que debe determinar el recuento de filas de columnas. no va a ser dinámico. Estoy seguro de que tiene casos de uso, así que incluí esta solución aquí.

• Aquí está una demostración en vivo: http://codepen.io/HugoGiraudel/pen/DoAIB
• Usted puede leer más sobre esto en Hugo blog post

Answer 7

He intentado esto sólo por diversión - porque yo también me gustaría una solución.

violín: http://jsfiddle.net/4V4cD/1/

html:

<div id="container"> 
<div class="object"><div class="content">one</div></div> 
<div class="object"><div class="content">two</div></div> 
<div class="object"><div class="content">three</div></div> 
<div class="object"><div class="content">four</div></div> 
<div class="object tall"><div class="content">five</div></div> 
<div class="object"><div class="content">six</div></div> 
<div class="object"><div class="content">seven</div></div> 
<div class="object"><div class="content">eight</div></div> 
</div> 

css:

#container { 
width:300px; height:300px; border:1px solid blue; 
transform:rotate(90deg); 
-ms-transform:rotate(90deg); /* IE 9 */ 
-moz-transform:rotate(90deg); /* Firefox */ 
-webkit-transform:rotate(90deg); /* Safari and Chrome */ 
-o-transform:rotate(90deg); /* Opera */ 
} 
.object { 
float:left; 
width:96px; 
height:96px; 
margin:1px; 
border:1px solid red; 
position:relative; 
} 
.tall { 
width:196px; 
} 

.content { 
padding:0; 
margin:0; 
position:absolute; 
bottom:0; 
left:0; 
text-align:left; 
border:1px solid green; 
-webkit-transform-origin: 0 0; 
transform:rotate(-70deg); 
-ms-transform:rotate(-90deg); /* IE 9 */ 
-moz-transform:rotate(-90deg); /* Firefox */ 
-webkit-transform:rotate(-90deg); /* Safari and Chrome */ 
-o-transform:rotate(-90deg); /* Opera */ 
} 

que se puede ver que esto funcionará con divs más altas/más amplios. Sólo tengo que pensar de lado. Imagino que el posicionamiento se convertirá en un problema. el origen de transformación debería ayudar a algunos con él.

Answer 8

Acabo de hacer con JQuery.

He probado en Firefox y IE10.

En mi problema los artículos tienen diferentes alturas.

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     .item { 
      border: 1px solid #FF0; 
      width: 100px; 
      position: relative; 
     } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
</head> 
<body> 
    <script> 
     function itemClicked(e) { 
      if (navigator.appName == 'Microsoft Internet Explorer') 
       e.removeNode(); 
      else 
       e.remove(); 
      reposition(); 
     } 

     function reposition() { 
      var px = 0; 
      var py = 0; 
      var margeY = 0; 
      var limitContainer = $('#divContainer').innerHeight(); 
      var voltaY=false; 

      $('#divContainer .item').each(function(key, value){ 
       var c = $(value); 

       if ((py+c.outerHeight()) > limitContainer) { 
        px+=100; 
        margeY-=py; 
        py=0; 
        voltaY=true; 
       } 

       c.animate({ 
        left:px+'px', 
        top:margeY+'px' 
       }); 

       voltaY=false; 
       py+=c.outerHeight(); 
      }); 
     } 

     function addItem() { 
      $('#divContainer').append('<div class="item" style="height: '+Math.floor(Math.random()*3+1)*20+'px;" onclick="itemClicked(this);"></div>'); 
      reposition(); 
     } 

    </script> 
    <div id="divMarge" style="height: 100px;"></div> 
    <div id="divContainer" style="height: 200px; border: 1px solid #F00;"> 
     <!--div class="item"></div--> 
    </div> 
    <div style="border: 1px solid #00F;"> 
     <input type="button" value="Add Item" onclick="addItem();" /> 
    </div> 
</body> 
</html> 

Answer 9

Para lograr esto con CSS3, no será tan difícil, siempre y cuando lo entiendo correctamente. Digamos que el HTML DIV se ve así:

<div class="rightDIV"> 
    <p>Some content</p> 
<div> 
<!-- --> 
<div class="leftDIV"> 
    <p>Some content</p> 
</div> 

Y el CSS sería el siguiente. Lo que el siguiente CSS hará es hacer que su DIV ejecute un flotador a la izquierda, que lo "pegará" a la izquierda del elemento Parent DIV. Luego, usa un "top: 0", y lo "pegará" a la parte superior de la ventana del navegador.

#rightDIV { 
     float: left 
     top: 0 
    } 
    #leftDIV { 
     float: right; 
     top: 0 
    } 

Answer 10

Utilice simplemente vertical-align:

.className { 
    display: inline-block; 
    vertical-align: top; 
} 

Answer 11

Aquí es una solución que funciona (casi perfecto) en FF, Opera, Chrome:

<style> 
    html {height:100%} 
    p {page-break-inside:avoid;text-align:center; 
     width:128px;display:inline-block; 
     padding:2px;margin:2px;border:1px solid red; border-radius: 8px;} 
    a {display:block;text-decoration:none} 
    b {display:block;color:red} 
    body { 
     margin:0px;padding:1%; 
     height:97%; /* less than 98 b/c scroolbar */ 
     -webkit-column-width:138px; 
     -moz-column-width:138px; 
     column-width:138px; 
    } 
    </style> 

    <body> 
    <p><b>title 1</b> 
    <a>link 1</a> 
    <a>link 2</a> 
    <a>link 3</a> 
    <a>link 4</a> 
    </p> 

    <p><b>title 2</b> 
    <a>link 1</a> 
    <a>link 2</a> 
    <a>link 3</a> 
    <a>link 4</a> 
    <a>link 5</a> 
    </p> 

    </body> 

El truco es "página-Break adentro: evitar "en P y ancho de columna en BODY. Viene con conteo dinámico de columnas. El texto en A puede ser multilínea y los bloques pueden tener diferentes alturas.

Tal vez alguien tiene algo para Edge y el IE

Answer 12

El truco que trabajó para mí era cambiar la escritura en modo durante la duración de la div-alineación.

.outer{ 
 
    /* Limit height of outer div so there has to be a line-break*/ 
 
    height:100px; 
 
    
 
    /* Tell the browser we are writing chinese. This makes everything that is text 
 
    top-bottom then left to right. */ 
 
    writing-mode:vertical-lr; 
 

 
} 
 

 
.outer > div{ 
 
    /* float:left behaves like float:top because this block is beeing aligned top-bottom first 
 
    */ 
 
    float:left; 
 
    width:40px; 
 
    
 
    /* Switch back to normal writing mode. If you leave this out, everything inside the 
 
    div will also be top-bottom. */ 
 
    writing-mode:horizontal-tb; 
 

 
}

<div class="outer"> 
 
    <div>one</div> 
 
    <div>two</div> 
 
    <div>three</div> 
 
    <div>four</div> 
 
    <div>one</div> 
 
    <div>two</div> 
 
    <div>three</div> 
 
    <div>four</div> 
 
    <div>one</div> 
 
    <div>two</div> 
 
    <div>three</div> 
 
    <div>four</div> 
 
</div>

Answer 13

Esto funciona, se aplican en ul:

display:flex; 
flex-direction:column; 
flex-wrap:wrap;