Включать только scroll горизонтально в div

У меня есть div, в котором внутри muestro изображения, видео, и т.д., то, в чем я нуждаюсь, состоит в том, чтобы, когда то, что он показывает, превзойдет определенную ширину div, он поддержал все онлайновым и только включает горизонтальный scroll.

До сих пор у меня есть это:

<?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>

Что случается с этим, дело в том, что, когда он прибывает в верх ширины div, контент это прокручивает вниз и меня включает вертикальный scroll, когда то, что я хочу, состоит в том, чтобы контент поддержал это онлайновым и включил горизонтальный scroll.

0
задан 04.11.2019, 22:18
2 ответа

Она soluciГіn, что encontrГ© состоял в том, чтобы добавлять свойство css white-space: nowrap, чтобы показывать, что не будет быть позволенным скачок строк.

<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
ответ дан 01.12.2019, 12:47

Дебет aГ±adir один tamaГ±o закрепил div (tamaГ±o, который ты желаешь, что он не был превышен) и после aГ±ades overflow:

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

Надеялся, что он подает тебя. ЗАМЕТЬ: если ты это помещаешь автомобиль, появится scroll, когда он обнаружит, что экран делается pequeГ±a.

0
ответ дан 01.12.2019, 12:47