У меня есть этот код:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/jquery.fancybox.min.css" /> <script src="js/jquery.fancybox.min.js"></script> <div class="container"> <div class="col-md-12"> <div class="row"> <div class="gal"> <a data-fancybox = "images" href="https://www.youtube.com/watch?v=dHVlMCcG_8Q"><img class="card-img-top img-fluid" src="https://img.youtube.com/vi/_sI_Ps7JSEk/mqdefault.jpg"></a> <a data-fancybox = "images" href="https://www.hoteljastarnia.com.pl/uploads/gallery/1/11809fjntwefklmnqvwyikost9111525024.jpg"><img src="https://www.hoteljastarnia.com.pl/uploads/gallery/1/11809fjntwefklmnqvwyikost9111525024.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/mWpE3Q/2.jpg"><img src="https://preview.ibb.co/mWpE3Q/2.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/i0PmHk/1.jpg"><img src="https://preview.ibb.co/i0PmHk/1.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/mysOxk/3.jpg"><img src="https://preview.ibb.co/mysOxk/3.jpg"></a> <a data-fancybox = "images" href="https://www.youtube.com/watch?v=dHVlMCcG_8Q"><img class="card-img-top img-fluid" src="https://img.youtube.com/vi/_sI_Ps7JSEk/mqdefault.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/i0PmHk/1.jpg"><img src="https://preview.ibb.co/i0PmHk/1.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/mWpE3Q/2.jpg"><img src="https://preview.ibb.co/mWpE3Q/2.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/i0PmHk/1.jpg"><img src="https://preview.ibb.co/i0PmHk/1.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/mysOxk/3.jpg"><img src="https://preview.ibb.co/mysOxk/3.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/i0PmHk/1.jpg"><img src="https://preview.ibb.co/i0PmHk/1.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/i0PmHk/1.jpg"><img src="https://preview.ibb.co/i0PmHk/1.jpg"></a> <a data-fancybox = "images" href="https://www.youtube.com/watch?v=dHVlMCcG_8Q"><img class="card-img-top img-fluid" src="https://img.youtube.com/vi/_sI_Ps7JSEk/mqdefault.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/i0PmHk/1.jpg"><img src="https://preview.ibb.co/i0PmHk/1.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/i0PmHk/1.jpg"><img src="https://preview.ibb.co/i0PmHk/1.jpg"></a> <a data-fancybox = "images" href="https://www.hoteljastarnia.com.pl/uploads/gallery/1/22600ijqwzaefghjlmqxbehqt4605389891.jpg"><img src="https://www.hoteljastarnia.com.pl/uploads/gallery/1/22600ijqwzaefghjlmqxbehqt4605389891.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/i0PmHk/1.jpg"><img src="https://preview.ibb.co/i0PmHk/1.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/i0PmHk/1.jpg"><img src="https://preview.ibb.co/i0PmHk/1.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/mysOxk/3.jpg"><img src="https://preview.ibb.co/mysOxk/3.jpg"></a> <a data-fancybox = "images" href="https://www.youtube.com/watch?v=dHVlMCcG_8Q"><img class="card-img-top img-fluid" src="https://img.youtube.com/vi/_sI_Ps7JSEk/mqdefault.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/mysOxk/3.jpg"><img src="https://preview.ibb.co/mysOxk/3.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/i0PmHk/1.jpg"><img src="https://preview.ibb.co/i0PmHk/1.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/i0PmHk/1.jpg"><img src="https://preview.ibb.co/i0PmHk/1.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/i0PmHk/1.jpg"><img src="https://preview.ibb.co/i0PmHk/1.jpg"></a> <a data-fancybox = "images" href="https://preview.ibb.co/mWpE3Q/2.jpg"><img src="https://preview.ibb.co/mWpE3Q/2.jpg"></a> <a data-fancybox = "images" href="https://www.youtube.com/watch?v=dHVlMCcG_8Q"><img class="card-img-top img-fluid" src="https://img.youtube.com/vi/_sI_Ps7JSEk/mqdefault.jpg"></a> </div> </div> </div> </div> <style> .gal { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .gal img { width: 100%; padding-top: 2px; padding-bottom: 2px; padding-left: 1px; padding-right: 1px; } @media(min-width: 701px) and (max-width: 1000px) { .gal { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } } @media(min-width: 501px) and (max-width: 700px) { .gal { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } } @media (max-width: 500px) { .gal { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } </style> </body> </html>
Примечание: https://jsfiddle.net/pL8qkerw/
У меня проблема с большим отступом влево / вправо по вертикали, между фотографиями.Я бы хотел, чтобы верхний и нижний отступы были равны.
Как это сделать?
У меня все еще есть вопрос по поводу названий фотографий и видео.Кто-нибудь знает, как добавить фотографию или название фильма в мой код?