0

Элемент в котором находится весь контент на сайте равняется по min-width, max-width. У меня есть ряд фотографий, которые я должен буду анимировать(что б они плыли слева направо). Проблема в том, что их много, и они портят весь адаптив, так как min-width перестает работать. overflow:hidden тоже не подходит, так как лишнее просто стает невидимым, и адаптив все равно не работает. Идеальным был бы варинат display:none, только для overflow, но такого нет.Помогите пожалуйста, я новый в веб дизайне.

1
  • Что-то я из этого описания совсем не понял о чём речь
    – andreymal
    20 мая 2020 в 20:26

1 ответ 1

0

Было бы здорово увидеть код, чтоб посоветовать что-то конкретное. Я попробую прояснить пару моментов.

  1. Overflow: hidden именно то, что нужно. Фотографий много, все что вылезло - скрываем.

a { display: block; padding: 10px; border: 1px solid #444; margin: 10px; }
img { width: 100px }
.container {
  display: flex;
  flex-wrap: nowrap;
  width: 350px;
  overflow: hidden;
  }
<div class="container">
<a data-flickr-embed="true" href="https://www.flickr.com/photos/zeeyolqpictures/26289590120/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n" title="Mountain"><img src="https://live.staticflickr.com/1517/26289590120_c83a0864ab_k.jpg"  alt="Mountain"></a>

<a data-flickr-embed="true" href="https://www.flickr.com/photos/cubagallery/19497262538/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n/" title="mountains"><img src="https://live.staticflickr.com/447/19497262538_8178db3cd5_k.jpg" alt="mountains"></a>

<a data-flickr-embed="true" href="https://www.flickr.com/photos/zeeyolqpictures/26289590120/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n" title="Mountain"><img src="https://live.staticflickr.com/1517/26289590120_c83a0864ab_k.jpg"  alt="Mountain"></a>

<a data-flickr-embed="true" href="https://www.flickr.com/photos/cubagallery/19497262538/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n/" title="mountains"><img src="https://live.staticflickr.com/447/19497262538_8178db3cd5_k.jpg" alt="mountains"></a>


<a data-flickr-embed="true" href="https://www.flickr.com/photos/zeeyolqpictures/26289590120/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n" title="Mountain"><img src="https://live.staticflickr.com/1517/26289590120_c83a0864ab_k.jpg"  alt="Mountain"></a>

<a data-flickr-embed="true" href="https://www.flickr.com/photos/cubagallery/19497262538/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n/" title="mountains"><img src="https://live.staticflickr.com/447/19497262538_8178db3cd5_k.jpg" alt="mountains"></a>


<a data-flickr-embed="true" href="https://www.flickr.com/photos/zeeyolqpictures/26289590120/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n" title="Mountain"><img src="https://live.staticflickr.com/1517/26289590120_c83a0864ab_k.jpg"  alt="Mountain"></a>

<a data-flickr-embed="true" href="https://www.flickr.com/photos/cubagallery/19497262538/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n/" title="mountains"><img src="https://live.staticflickr.com/447/19497262538_8178db3cd5_k.jpg" alt="mountains"></a>

</div>

  1. "Плыли" значит нужен анимированный сдвиг внутри видимого окошка. Берем тот же пример и добавляем сдвиг

setInterval(function() {
  var tag = document.querySelector('a');
  if (!tag.style.marginLeft)
     tag.style.marginLeft = 0;
  tag.style.marginLeft = parseInt(tag.style.marginLeft) - 1 + 'px';
}, 30);
    a { display: block; padding: 10px; border: 1px solid #444; margin-right: 10px; }
    img { width: 100px }
    .container {
      display: flex;
      flex-wrap: nowrap;
      width: 350px;
      overflow: hidden;
      }
    <div class="container">
    <a data-flickr-embed="true" href="https://www.flickr.com/photos/zeeyolqpictures/26289590120/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n" title="Mountain"><img src="https://live.staticflickr.com/1517/26289590120_c83a0864ab_k.jpg"  alt="Mountain"></a>

    <a data-flickr-embed="true" href="https://www.flickr.com/photos/cubagallery/19497262538/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n/" title="mountains"><img src="https://live.staticflickr.com/447/19497262538_8178db3cd5_k.jpg" alt="mountains"></a>

    <a data-flickr-embed="true" href="https://www.flickr.com/photos/zeeyolqpictures/26289590120/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n" title="Mountain"><img src="https://live.staticflickr.com/1517/26289590120_c83a0864ab_k.jpg"  alt="Mountain"></a>

    <a data-flickr-embed="true" href="https://www.flickr.com/photos/cubagallery/19497262538/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n/" title="mountains"><img src="https://live.staticflickr.com/447/19497262538_8178db3cd5_k.jpg" alt="mountains"></a>


    <a data-flickr-embed="true" href="https://www.flickr.com/photos/zeeyolqpictures/26289590120/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n" title="Mountain"><img src="https://live.staticflickr.com/1517/26289590120_c83a0864ab_k.jpg"  alt="Mountain"></a>

    <a data-flickr-embed="true" href="https://www.flickr.com/photos/cubagallery/19497262538/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n/" title="mountains"><img src="https://live.staticflickr.com/447/19497262538_8178db3cd5_k.jpg" alt="mountains"></a>


    <a data-flickr-embed="true" href="https://www.flickr.com/photos/zeeyolqpictures/26289590120/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n" title="Mountain"><img src="https://live.staticflickr.com/1517/26289590120_c83a0864ab_k.jpg"  alt="Mountain"></a>

    <a data-flickr-embed="true" href="https://www.flickr.com/photos/cubagallery/19497262538/in/photolist-G482eb-vGUySW-navtgg-bs7NH4-dCghzB-QuafdV-C8xe2x-NBiWUV-26SZaqk-edwix2-iqoDNf-do9HsH-5oj2QJ-bniY7P-quRVQM-qTSF27-21KnWk5-dEkunG-6Zb1wn-8tF7BU-dWS6DT-iDdo2D-23HmyuY-DiJNbD-eXgqLP-esbT85-bnJHua-QbTcbm-ecevC8-23iHfEc-dWnZEg-Pc14i4-naDN9o-CRNano-h1zoei-2c2G4kw-6zvGGf-XRokTU-dSceGF-QYusmS-n2oLAQ-FhTwRH-DDnvj9-ANRHnm-8tF7Y3-21xf4J9-MKocpA-JRMGJH-88qkTf-pMFZ9n/" title="mountains"><img src="https://live.staticflickr.com/447/19497262538_8178db3cd5_k.jpg" alt="mountains"></a>

    </div>

  1. Ну и теперь адаптивность. Медиа запросами меняем стили под каждый вариант.

ps. Решения достаточно грубые, исключительно для учебных целей.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.