espacios vacíos flotantes CSS

Question

Tengo varios divs en una envoltura, tienen diferentes alturas. Me gustaría flotar a la izquierda. 2 divisiones pueden caber en una fila. Pero como cada div tiene una altura diferente, queda bastante espacio en la siguiente fila. ¿Puedo eliminar el espacio y mover el div arriba?

Por favor mirar la imagen:

Aquí está el código:

<div class="wrap"> 
    <div class="box1">Box1 with less height.</div> 
    <div class="box2">Box2 with more height.</div> 
    <div class="box3">Box3 with whatever height.</div> 
</div> 

CSS:

.wrap{ 
    width:410px; 
    border:1px solid red; 
    overflow:hidden; 
} 

.box1{ 
    width:200px; 
    height:50px; 
    float:left; 
    border:1px solid green; 
} 

.box2{ 
    width:200px; 
    height:150px; 
    float:left; 
    border:1px solid blue; 
} 

.box3{ 
    width:200px; 
    height:250px; 
    float:left; 
    border:1px solid blue; 
} 

jsFiddle: http://jsfiddle.net/NsH5M/

PS. Las alturas div no son fijas. Esto es solo por ejemplo. Editar: Lo siento, debería haber mencionado que no es posible editar el marcado.

Answer 1

Intente utilizar masonry. Esto debería ayudarte a organizar tu div sin espacio vacío.

eso es lo que se usa como un ejemplo de su código: jsfiddle

HTML:

<div class="wrap"> 
    <div class="box box1">Box1 with less height.</div> 
    <div class="box box2">Box2 with more height.</div> 
    <div class="box box3">Box3 with whatever height.</div> 
</div> 

JavaScript:

$(function(){ 
    $('.wrap').masonry({ 
     // options 
    itemSelector : '.box' 
    }); 
});​ 
​ 

y CSS:

.wrap{ 
    width:410px; 
    border:1px solid red; 
    overflow:hidden; 

} 

.box{ 
    float: left; 
    width: 200px; 
} 

.box1{ 
    height:50px; 
    border:1px solid green; 
} 

.box2{ 
    height:150px; 
    border:1px solid blue; 
} 

.box3{ 
    height:250px; 
    border:1px solid blue; 
} 

Answer 2

No estoy seguro de si iba a funcionar, pero se puede tratar cuadro 1 y el cuadro 3 flotante a la izquierda y la caja 2 a la derecha

EDIT: funciona en Firefox http://jsfiddle.net/NsH5M/1/

Answer 3

Dar float:right-.box2 escribe así:

.box2{ 
    width:200px; 
    height:150px; 
    float:right; 
    border:1px solid blue; 
} 

Comprobar este http://jsfiddle.net/NsH5M/2/

Answer 4

si se puede editar su margen de beneficio, se puede envolver box1 y box3 en un recipiente que se flotó:

http://jsfiddle.net/NsH5M/3/

también puede flotar: el derecho de su box3 pero eso va a cambiar ligeramente el resultado (Habrá un espacio entre las cajas flotadas a la izquierda y la que está a la derecha, lo que puede no ser un problema según su diseño.

Answer 5

Simplemente use flotador: a la derecha para los elementos que desee a la derecha. En este caso:

.box2{ 
width:200px; 
height:150px; 
float:right; 
border:1px solid blue; 
} 

actualizado su jsFiddle here

Answer 6

Isotope puede hacer esto por usted, utilizando el diseño de mampostería.

Answer 7

Solución correcta ... La pregunta clave es "¿tiene solo 2 columnas?". Y desde aquí se da el caso, la solución correcta sería la siguiente:

(esto es un código jQuery pero es obvio que se puede hacer si algunas palabras más en pura JS)

Es mi clase de caso "Agregar- info "se asignó a todos los elementos en el contenedor. Lo que está haciendo es simplemente verificar si el próximo elemento debe flotar hacia la izquierda o hacia la derecha. No use scripts complejos para todo. La mitad de las personas acceden a la web desde el teléfono móvil y la cantidad de datos móviles es limitada.

function contactFloats() { 
    var leftCounter = 0; 
    var rightCounter = 0; 
    $('.add-info').each(function(){ 
      if(leftCounter <= rightCounter){ 
       $(this).css('float', 'left'); 
       leftCounter += $(this).outerHeight(); 
      }else{ 
       $(this).css('float', 'right'); 
       rightCounter += $(this).outerHeight(); 
      } 
    }); 
}