ここを参考にしつつ、下ののようなものを作ったのですが、横スクロールできませんでした。
できるだけflexを使いたいのですが、どのようにできるでしょうか?
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4 <link rel="stylesheet" href="https://cdn.jsdelivr.net/lightgallery.js/1.0.1/css/lightgallery.min.css"> 5 <meta charset="UTF-8"> 6 <style type="text/css"> 7 html, body { 8 height: 100%; 9 } 10 11 .gallery-img { 12 margin: 1px; 13 height: calc(((100vh - 23px) / 3)); 14 overflow: hidden; 15 } 16 17 .gallery-img img { 18 height: calc(((100vh - 23px) / 3)); 19 } 20 21 #containe { 22 height: 100vh; 23 width: 100vw; 24 position: relative; 25 } 26 27 #lightgallery { 28 position: absolute; 29 white-space: nowrap; 30 display: flex; 31 flex-flow: column-reverse wrap-reverse; 32 width: 100vw; 33 height: 100vh; 34 float: right; 35 overflow-x: scroll; 36 } 37 </style> 38 <script src="https://cdn.jsdelivr.net/lightgallery.js/1.0.1/js/lightgallery.min.js"></script> 39 <script> 40 document.addEventListener("DOMContentLoaded", function () { 41 document.getElementById("containe").insertAdjacentHTML("beforeend", '<div id="lightgallery"></div>'); 42 for (i = 1; i <= 100; i++) { 43 document.getElementById("lightgallery").insertAdjacentHTML('beforeend', '<a href="//placehold.jp/3e80e4/ffffff/300x300.png?text=' + i + '.jpg" class="gallery-img" download>' + '<img src="https://placehold.jp/000000/ffffff/300x300.png?text=' + i + '.jpg">' + '</a>'); 44 } 45 }, false); 46 </script> 47</head> 48<body> 49<div id="containe"></div> 50</body> 51</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。