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.