Question

在调整屏幕宽度时，我试图使字幕响应。我发现我的图片的一列（左侧）带有标题，但第二列的标题没有，并且除非我特别放置它们，否则它们位于第一列的标题之下（然后它们没有响应）。在调整大小时以及在其他情况下，如何使标题坚持对应的图片？

我已将图像的位置设为相对位置，将figcaption设为绝对位置。我尝试过放置封装了图片和标题的div，删除了浮动元素，等等。

img {
  padding-top: 15px;
  float: left;
  padding-right: 15px;
  position: relative;
}

#pic2 {
  background-color: #4aaaa5;
  ;
  text-align: center;
  position: absolute;
  top: 297px;
  z-index: 1;
  padding: 15px 110px;
  color: white;
}

#pic1 {
  background-color: #4aaaa5;
  ;
  text-align: center;
  position: absolute;
  top: 297px;
  z-index: 1;
  padding: 15px 135px;
  color: white;
}

#pic3 {
  background-color: #4aaaa5;
  ;
  text-align: center;
  position: absolute;
  top: 463px;
  z-index: 1;
  padding: 15px 133px;
  color: white;
}

#pic4 {
  background-color: #4aaaa5;
  ;
  text-align: center;
  position: absolute;
  top: 463px;
  left: 534px;
  z-index: 1;
  padding: 15px 120px;
  color: white;
}

#pic5 {
  background-color: #4aaaa5;
  text-align: center;
  position: absolute;
  top: 627px;
  padding: 15px 137.5px;
  color: white;
}

<body>
  <div class="wrapper">
    <h1 class="header1">Portfolio</h1>
    <div class="wrapper2">

      <fig>
        <div class="gallery1">
          <img id="Pic1" src="./assets/images/download.jpg" height="150px" width="33.3%">
          <figcaption id="pic1">Island</figcaption>
      </fig>

      <fig>
        <div class="gallery2">
          <img id="Pic2" src="./assets/images/d2.jpg" height="150px" width="33.3%">
          <figcaption id="pic2">Track & Field</figcaption>
        </div>
      </fig>

      <fig>
        <div class="gallery3">
          <img id="Pic3" src="./assets/images/d3.jpg" height="150px" width="33.3%">
          <figcaption id="pic3">Bambi</figcaption>
        </div>
      </fig>

      <fig>
        <div class="gallery4">
          <img id="Pic4" src="./assets/images/d4.jpg" height="150px" width="33.3%">
          <figcaption id="pic4">City Scape</figcaption>
        </div>
      </fig>

      <fig>
        <div class="gallery5">
          <img id="Pic5" src="./assets/images/d5.jpg" height="150px" width="33.3%">
          <figcaption id="pic5">"Art"</figcaption>
        </div>
      </fig>


      </div>
    </div>
  </div>

Answer 1

<div class="gallery1">
<fig>
<img id="picture1" src="./assets/images/download.jpg" height="150px" 
width="33.3%">
<figcaption id="pic1">Island</figcaption> 
</fig>
</div>

正确的编码^^同样，“ 43”行上还有一个额外的</div>标签。

您可能想重新编码。我猜这是一个家庭作业项目。

我会帮助您解决HTML，但是CSS由您决定。

HTML

<div class="container">
 <div class="wrapper">
  <h1 class="header1">Portfolio</h1>
 </div>
 <div class="wrapper2">
  <div class="gallery1">
   <fig>
    <img id="Pic1" src="./assets/images/download.jpg" height="150px" 
width="33.3%">
    <figcaption id="pic1">Island</figcaption> 
   </fig>
  </div>


  <div class="gallery2">
   <fig>
    <img id="Pic2" src="./assets/images/d2.jpg" height="150px" width="33.3%">
    <figcaption id="pic2">Track & Field</figcaption> 
   </fig>
  </div>


  <div class="gallery3">
   <fig>
    <img id="Pic3" src="./assets/images/d3.jpg" height="150px" width="33.3%">
    <figcaption id="pic3">Bambi</figcaption>
   </fig>
  </div>   



  <div class="gallery4">
   <fig>
    <img id="Pic4" src="./assets/images/d4.jpg" height="150px" width="33.3%">
    <figcaption id="pic4">City Scape</figcaption>    
   </fig>
  </div>

  <div class="gallery5">
   <fig>
    <img id="Pic5" src="./assets/images/d5.jpg" height="150px" width="33.3%">
     <figcaption id= "pic5">"Art"</figcaption> 
    </fig>
   </div>


  </div>
</div>

Answer 2

您可以使用此代码

body {
            margin: 0;
            padding: 0;
        } 
        .header1 {
            text-align: center;
            font-size: 60px;
        }
        ul {
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }
        ul li {
            margin: 0;
            padding: 0;
            list-style: none;
            display: inline-block;
        }      
        ul li img {
            margin: 0;
            padding: 0;
            width: 100%;
        }               
        #pic1, #pic2, #pic3, #pic4, #pic5 {
            background-color: #4aaaa5;
            text-align: center;
            padding: 15px 135px;
            color: white;
        }
        .gallery1,.gallery2,.gallery3,.gallery4,.gallery5, {
            width: 19%;
            float: left;
            display: inline-block;
        }

    <div class="wrapper">
        <h1 class="header1">Portfolio</h1>
        <div class="wrapper2">
            <ul>
                <li>
                    <div class="gallery1">
                        <img id="Pic1" src="https://www.w3schools.com/images/picture.jpg">
                        <figcaption id="pic1">Island</figcaption>
                    </div>
                </li>
                <li>
                    <div class="gallery2">
                        <img id="Pic2" src="https://www.w3schools.com/images/picture.jpg">
                        <figcaption id="pic2">Track & Field</figcaption>
                    </div>
                </li>
                <li>
                    <div class="gallery3">
                        <img id="Pic3" src="https://www.w3schools.com/images/picture.jpg">
                        <figcaption id="pic3">Bambi</figcaption>
                    </div>
                </li>
                <li>
                    <div class="gallery4">
                        <img id="Pic4" src="https://www.w3schools.com/images/picture.jpg">
                        <figcaption id="pic4">City Scape</figcaption>
                    </div>
                </li>
                <li>
                    <div class="gallery5">
                        <img id="Pic5" src="https://www.w3schools.com/images/picture.jpg">
                        <figcaption id="pic5">"Art"</figcaption>
                    </div>
                </li>
            </ul>
        </div>
    </div>

如何使我的图片字幕具有响应性？

2 个答案: