float - CSS: serie de elementos flotantes sin envoltura, sino que se desplaza horizontalmente

elementos flotantes css

Question

Estoy trabajando en un visor de álbum. En la parte superior quiero un contenedor horizontal de todas las miniaturas de imágenes. En este momento todas las miniaturas están envueltas en un div con float:left . Estoy intentando averiguar cómo evitar que estas miniaturas se envuelvan en la siguiente línea cuando hay demasiadas, sino que permanecen todas en una fila horizontal y usan la barra de desplazamiento.

Aquí está mi código: (No quiero usar tablas)

<style type="text/css">
    div {
        overflow:hidden;
    }
    #frame {
        width:600px;
        padding:8px;
        border:1px solid black;
    }
    #thumbnails_container {
        height:75px;
        border:1px solid black;
        padding:4px;
        overflow-x:scroll;
    }
    .thumbnail {
        border:1px solid black;
        margin-right:4px;
        width:100px; height:75px;
        float:left;
    }
    .thumbnail img {
        width:100px; height:75px;
    }
    #current_image_container img {
        width:600px;
    }
</style>
<div id="frame">
    <div id="thumbnails_container">
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/glry-pixie-bob-kittens.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-1.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-3.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-Jan08.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery3.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery4.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten3.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten1.jpg" alt="foo" /></div>
    </div>
    <div id="current_image_container">
        <img src="http://www.whitetailrun.com/Pixiebobs/PBkittenpics/shani-kits/Cats0031a.jpg" alt="foo" />
    </div>
</div>

Answer 1

Todavía preferiría poder usar elementos de bloque para las miniaturas, así puedo agregar bordes y lo que no.

Puede usar "bordes y otras cosas" con display: inline-block elementos de display: inline-block . También puede usar elementos fijos con / en inline-block altura, para que su diseño sea consistente.

Básicamente, haga .thumbnail not- .thumbnail y display: inline-block , aplique width / height, borders, etc., y en #thumbnails_container use white-space: nowrap .

Answer 2

¿Qué tal si usas display: inline-block esta forma puedes usar bordes en los elementos del bloque y obtener la barra de desplazamiento horizontal.

#thumbnails_container {
    height:75px;
    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
    white-space: nowrap
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    display: inline-block;
}

Answer 3

Agregue otro contenedor para las miniaturas y configure su ancho con el ancho total de todas las miniaturas (junto con sus márgenes, bordes y relleno). Mira debajo de div llamado "thumbnails_scrollcontainer":

<style type="text/css">
div {
    overflow:hidden;
}
#frame {
    width:600px;
    padding:8px;
    border:1px solid black;
}
#thumbnails_container {
    height:75px;
    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    float:left;
}
.thumbnail img {
    width:100px; height:75px;
}
#current_image_container img {
    width:600px;
}
</style>
<div id="frame">
    <div id="thumbnails_container">
        <div id="thumbnails_scrollcontainer" style="width : 848px;">
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/glry-pixie-bob-kittens.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-1.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-3.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-Jan08.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery3.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery4.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten3.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten1.jpg" alt="foo" /></div>
        </div>
    </div>
    <div id="current_image_container">
        <img src="http://www.whitetailrun.com/Pixiebobs/PBkittenpics/shani-kits/Cats0031a.jpg" alt="foo" />
    </div>
</div>

Answer 4

De esta manera funcionó para mí

main #thumbnailBox {
height: 154px;
width: auto;
overflow-x: scroll;
white-space: nowrap;}

main .thumbnail {
display: inline-block;}

Answer 5

En lugar de flotar, prueba esto:

#thumbnails_container {
    height:75px;
    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
    overflow-y: hidden;
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    display: inline;
}

Eliminar el div { overflow:hidden; } div { overflow:hidden; } , el resto permanece igual.

Es un poco más simple y abarcará y se desplazará como lo desee.

Answer 6

Es un error común pensar que establecer la propiedad de espacio en blanco para "nowrap" también funciona en elementos flotados. Solo funciona en elementos en línea o elementos de bloque en línea .

Supongo que necesitas que los elementos flotados sean un bloque, para que puedas convertirlos en bloques en línea. Es posible obtenerlo en todos los navegadores con algún truco:

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

Esta solución abre una gran cantidad de nuevos escenarios de diseño web para ser explorados, así que doy gracias al autor por los créditos adecuados: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Aquí puede leer un documento que habla de la propiedad del espacio en blanco y los elementos flotantes: http://reference.sitepoint.com/css/white-space

¡Aclamaciones!

Answer 7

Esto me está volviendo loco, no puedo entenderlo.

Esto funciona un poco:

.thumbnail {
    padding-right:4px;
    width:100px; height:75px;
    display: table-cell;
}
.thumbnail img {
    border:1px solid black;
    display: block;
    width:100px; height:75px;
}

Pero no tengo idea de la compatibilidad del navegador para la pantalla: tabla-celda;

Personalmente, o bien hago los pulgares verticales o uso javascript (la barra de desplazamiento del navegador es fea de todos modos)

Answer 8

Has probado

white-space: nowrap;

en tu #thumbnails_container?

Answer 9

Tuve el mismo problema hace unos meses. Intenté todas las soluciones presentadas aquí. Ellos no funcionan.

Esta es mi solución:

Dale a la envoltura div la corrección de ancho necesaria (el cuerpo se expandirá también). Luego coloque el contenido en el contenedor de envoltura extra grande (flotante o en línea). Ahora puede usar la barra de desplazamiento horizontal de la ventana como barra de desplazamiento. Ahora todo lo demás en la página (encabezado, pie de página, etc.) se está desplazando. Puede darles a estos contenedores posición: fija. Ahora permanecen en esa posición, mientras desplazas el envoltorio / cuerpo extra ancho.