使用 HTML+CSS 的响应式图片库中的图形标题问题

Question

我目前正在从头开始制作一个（静态）网站（所以我自己编写 HTML 和 CSS 的代码），我想要一个响应式的“图片库”来改变图片的宽度根据你的屏幕宽度，所以我按照这个教程：CSS Image Gallery - responsive

但是，根据自己的喜好更改它时，我遇到了一个问题，我无法用我当前的 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>

Answer 1

你给responsivethreeclass的float:left属性将图像左对齐。由于您之后没有重置左对齐功能，因此您遇到了文本滚动问题。 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>

使用 HTML+CSS 的响应式图片库中的图形标题问题

Problem with figure caption in responsive image gallery using HTML+CSS

html

css

responsive-design

responsive-images