Блог

Главная - Вопросы по программированию - Проблема с подписью рисунка в галерее адаптивных изображений с использованием HTML CSS

Проблема с подписью рисунка в галерее адаптивных изображений с использованием HTML CSS

#html #css #responsive-design #responsive-images

Вопрос:

В настоящее время я создаю (статический) веб — сайт с нуля (поэтому сам кодирую HTML и CSS), и я хочу иметь отзывчивую «галерею изображений», которая изменяет ширину изображений в соответствии с шириной вашего экрана, поэтому я последовал этому руководству: Галерея изображений CSS- отзывчивая

Однако, изменив его на свой вкус, я столкнулся с проблемой, которую не смог исправить с помощью моего текущего набора навыков HTML/CSS (это не так уж много, я в этом совсем новичок). Моя проблема в том, что когда у меня в галерее есть (в моем примере три) изображения одинакового размера, но подписи к изображению имеют разную длину, это негативно влияет на текст, за которым следует галерея (см. Пример и изображение ниже). Я пытался исправить это с помощью учебных пособий, доступных на W3 и других, но пока ничего не получалось.

Кто-нибудь из вас знает, как (легко) это исправить? И если да, пожалуйста, объясните, что вы изменили, потому что я хочу по-настоящему понять, что происходит на моем сайте (именно поэтому я не хотел использовать эти статические генераторы сайтов).

Примечание: Я создал 3 типа галерей, по одной для двух, трех и четырех изображений, что объясняет классы «.responsivethree» и т. Д.

введите описание изображения здесь

 <!DOCTYPE html>
<html lang="en-NL">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
  <style type="text/css">
    body {
    font-family: helvetica;
    padding: 20px;
    font-size:11pt;
}

header {
    max-width: 800px;
}

main {
    max-width: 800px;
}

section {
    padding-left: 15px;
    border-left: 1px solid rgb(223, 223, 223);
    border-radius: 5px;
}

footer {
    max-width: 800px;
}


div.gallery {
  padding: 0px;
}

div.gallery img {
  width: 98%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

div.desc {
  padding: 2px;
  padding-bottom: 5px;
  text-align: center;
  color: gray;
  font-size: 85%;
}

* {
  box-sizing: border-box;
}

.responsivefour {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

.responsivethree {
  padding: 0 6px;
  float: left;
  width: 33.32%;
}

.responsivetwo {
  padding: 0 6px;
  float: left;
  width: 49.9988%;
}

@media only screen and (max-width: 700px) {
  .responsivefour {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsivefour {
    width: 100%;
  }
  .responsivethree {
    width: 100%;
  }
  .responsivetwo {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
  </style>
</head>
<body>
<!-- #################################################################### -->
<header  id="top">
    <h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
    <h2>bla</h2>
    <section>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper. 
        </p>
        <div class="responsivethree">
            <div class="gallery">
                <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
          <div class="desc">--- short description ---</div>
            </div>
        </div>
        <div class="responsivethree">
            <div class="gallery">
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
              <div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
            </div>
        </div>
        <div class="responsivethree">
            <div class="gallery">
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
              <div class="desc">--- stuff ---</div>
            </div>
      </div>
        <p>
            <b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
        </p>
    </section>
</article>
</main>
<!-- #################################################################### -->
<footer>
    <p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>

Ответ №1:

Свойство float:left, которое вы передали классу responsivethree, выравнивает изображения слева. Поскольку после этого вы не сбросили функцию выравнивания слева, у вас возникли проблемы с прокруткой текста. Команда clear:both используется для сброса свойства float:left.

 <!DOCTYPE html>
<html lang="en-NL">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
  <style type="text/css">
    body {
    font-family: helvetica;
    padding: 20px;
    font-size:11pt;
}

header {
    max-width: 800px;
}

main {
    max-width: 800px;
}

section {
    padding-left: 15px;
    border-left: 1px solid rgb(223, 223, 223);
    border-radius: 5px;
}

footer {
    max-width: 800px;
}


div.gallery {
  padding: 0px;
}

div.gallery img {
  width: 98%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

div.desc {
  padding: 2px;
  padding-bottom: 5px;
  text-align: center;
  color: gray;
  font-size: 85%;
}

* {
  box-sizing: border-box;
}

.responsivefour {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

.responsivethree {
  padding: 0 6px;
  float: left;
  width: 33.32%;
}

.responsivetwo {
  padding: 0 6px;
  float: left;
  width: 49.9988%;
}

@media only screen and (max-width: 700px) {
  .responsivefour {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsivefour {
    width: 100%;
  }
  .responsivethree {
    width: 100%;
  }
  .responsivetwo {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.clear {
  clear: both;
}
  </style>
</head>
<body>
<!-- #################################################################### -->
<header  id="top">
    <h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
    <h2>bla</h2>
    <section>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper. 
        </p>
        <div class="responsivethree">
            <div class="gallery">
                <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
          <div class="desc">--- short description ---</div>
            </div>
        </div>
        <div class="responsivethree">
            <div class="gallery">
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
              <div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
            </div>
        </div>
        <div class="responsivethree">
            <div class="gallery">
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
              <div class="desc">--- stuff ---</div>
            </div>
      </div>
        <p class="clear">
            <b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
        </p>
    </section>
</article>
</main>
<!-- #################################################################### -->
<footer>
    <p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>

Комментарии:

1. Большое вам спасибо, из-за вашего комментария я действительно увидел, что неправильно скопировал пример с помощью W3. Они уже сделали clear:both команду, я просто забыл поставить <div class="clearfix"></div> после галереи. Спасибо за объяснение (это заставило меня понять это сейчас 🙂 )

Метки: