0

Tengo un div en el cual dentro de el muestro imágenes, videos, etc., lo que necesito es que cuando lo que muestre sobrepase el ancho especificado del div mantenga todo en linea y solo active el scroll horizontal.

Hasta el momento tengo esto:

<?php
$archivos = Repositorio::getLista(1);

$files = "";

if(is_array($archivos))
{
    foreach($archivos as $archivo)
    {
        if($archivo["ext"] == "jpg" || $archivo["ext"] == "png" || $archivo["ext"] == "gif")
        {
            if($files == "")
                $files = "<img src='".$archivo["nombre"]."' style='display: inline-block; width: 30%; margin-right: 5px;'>";
            else
                $files .= "<img src='".$archivo["nombre"]."' style='display: inline-block; width: 30%; margin-right: 5px;'>";
        }
        else if($archivo["ext"] == "mp4" || $archivo["ext"] == "webm")
        {   
            if($files == "")
                $files = "<video src='".$archivo["nombre"]."' controls style='display: inline-block; width: 30%; margin-right: 5px; vertical-align: middle;'></video>";
            else
                $files .= "<video src='".$archivo["nombre"]."' controls style='display: inline-block; width: 30%; margin-right: 5px; vertical-align: middle;'></video>";
        }
        else
        {
            if($files == "")
                $files = "<div style='display: inline-block; margin-right: 5px; vertical-align: middle;'><img src='img/archivo.png' style='height: 45px;'>
                          <p>".$archivo["nombre"]."</p></div>";
            else
                $files .= "<div style='display: inline-block; margin-right: 5px; vertical-align: middle;'><img src='img/archivo.png' style='height: 45px;'>
                          <p>".$archivo["nombre"]."</p></div>";
        }
    }
}
?>
<div id="archivosPreview" style="margin-bottom: 0; overflow-x: auto; overflow-y: hidden; max-height: 130px; width: 530px;">
<?php echo $files; ?>
</div>

Lo que sucede con esto es que cuando llega al tope del ancho del div el contenido lo desplaza hacia abajo y me activa el scroll vertical, cuando lo que quiero es que el contenido lo mantenga en linea y active el scroll horizontal.

2 respuestas 2

1

La solución que encontré fue agregar la propiedad css white-space: nowrap para indicar que no se va a permitir el brinco de renglones.

<div id="archivosPreview" style="margin-bottom: 0; overflow-x: auto; overflow-y: hidden; max-height: 130px; width: 530px; white-space: nowrap;">
<?php echo $files; ?>
</div>
0

Debes añadir al div un tamaño fijo (tamaño el cual deseas que no sea desbordado) y despues añades overflow:

.scroll{
    width: 300px;
    overflow-x: scroll; 
}

Espero te sirva. NOTA: si lo pones auto aparecera el scroll cuando detecte que la pantalla se esta haciendo pequeña.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.