У меня есть 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.
Она 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>
Дебет aГ±adir один tamaГ±o закрепил div (tamaГ±o, который ты желаешь, что он не был превышен) и после aГ±ades overflow:
.scroll{
width: 300px;
overflow-x: scroll;
}
Надеялся, что он подает тебя. ЗАМЕТЬ: если ты это помещаешь автомобиль, появится scroll, когда он обнаружит, что экран делается pequeГ±a.