tengo una página web con un panel de imágenes y un par de elementos div, con el mismo ancho, cada uno que contiene una imagen.

Quiero ponerlos en 2 cascada columnas sin espacios entre ellos (excepto para el relleno)

Tengo el siguiente código css para la imagen de envase:

.imageContainer
{
    position:relative;
    margin:4px 4px 4px 4px;
    border:4px solid #333;
    float: left;
    display:inline-block;
    min-height: 40px;
    width: 48%;
}

Esto hace que las columnas de a como en la imagen 1, pero necesito las columnas para ver como número 2

Gracias!

Posición div imágenes en 2 columnas de diseño

EDICIÓN:

Posición div imágenes en 2 columnas de diseño

.pg-main
{
    float: left;
    width: 100%;
    padding: 0;
}
.entries
{
    float: left;
    width: 800px;
    padding: 8px 20px 0 0;
}
.entries p
{
    display: block;
}
.imageContainer
{
    position:relative;
    margin:4px 4px 4px 4px;
    border:4px solid #333;
    float: left;
    display:inline-block;
    min-height: 40px;
    width: 48%;
}
  • Puede usted por favor nos muestra el código HTML? Tal vez un jsfiddle?
  • Buscas este masonry.desandro.com
  • Por casualidad, ¿no te importa acerca de IE?
  • no puedo hacer una jsfiddle porque toda la página es dinámica.
InformationsquelleAutor L.Grillo | 2013-10-11

4 Comentarios

  1. 2

    Aquí es una de las posibles soluciones mediante columnas-no funciona en IE9 o anterior.

    VIOLÍN: http://jsfiddle.net/YjHzd/

    HTML

    <div id="container">
        <div class="block" style="height:30px"></div>
        <div class="block" style="height:30px"></div>
        <div class="block" style="height:70px"></div>
        <div class="block" style="height:70px"></div>
        <div class="block" style="height:50px"></div>
    </div>

    CSS

    #container {
        -moz-column-count:2;
        -webkit-column-count:2;
        column-count:2;
        height: 145px;
        width: 80px;
    }
    
    .block {
        width: 40px;
        background-color: red;
        margin: 0 0 5px 0;
    }
    • Es menos semánticamente correcta. Si el contenido tiene dos columnas, debe ser en dos diferentes divs. Ni siquiera puedo decir en su ejemplo, donde la segunda columna comienza…
    • Que funciona muy bien! Gracias!
    • La mía también funciona en CADA semi-amueblado de navegador moderno, incluyendo IE6+, Firefox 3.6+, y todas las versiones de Chrome.
  2. 2

    A diferencia de muchas otras soluciones en esta página, a mí me funciona en todos los semi-modernas de los navegadores, incluyendo IE 6, 7, 8, 9; Firefox 3.6 y 29, y todas las versiones de Chrome. Consulte a continuación para ver las capturas de pantalla.

    Si son de ancho fijo, como se ilustra, a sólo 1) envoltura de sus cuadros dentro de otro div y 2) hacer lo siguiente:

    Aquí está el JSFiddle: http://jsfiddle.net/SqQqZ/

    HTML:

    <div>
        <div id="leftBoxesBox">
            <div class="redbox"></div>
            <div class="redbox"></div>
            <div class="redbox" style="height: 15em"></div>
        </div>
        <div id="rightBoxesBox">
            <div class="redbox" style="height: 12em"></div>
            <div class="redbox"></div>
        </div>
    </div>

    CSS:

    div.redbox {
        background: red;
        width: 10em;
        height: 5em;
        margin: 10px;
    }
    
    div#leftBoxesBox {
        position: absolute;
        left: 0;
        width: 12em;
    }
    
    div#rightBoxesBox {
        position: absolute;
        left: 13em;
        width: 12em;
    }

    Internet Explorer 6:
    Posición div imágenes en 2 columnas de diseño

    Firefox 3.6:
    Posición div imágenes en 2 columnas de diseño

    • Sólo traté de esta solución antes, pero este no encajan porque también tengo una sola columna de visualización. Por cierto, gracias también.
    • SI yo estuviera obligado a tener un solo columnas (3ª parte del servicio web no tengo ningún control sobre, por ejemplo), me gustaría que en lugar de inyectar un poco de jQuery para dividir las dos listas dinámicamente (como stackoverflow.com/questions/4806687/…)
  3. 1

    Por favor enviar su HTML, sería de gran ayuda.

    Tal vez esto le ayudará a :

    clear:left;

    después de su 2do imagediv. para la 3ª div puede flotar sin problemas.

  4. 0

    Básicamente, sólo hay dos maneras de hacer esto. Usted puede utilizar Javascript para determinar la posición del elemento. O usted puede crear dos columnas separadas que tienen las imágenes contenidas en ellos. A la izquierda y a la Derecha de la Columna de

Dejar respuesta

Please enter your comment!
Please enter your name here