Question

在这段代码中，我试图为每张图片写一个标题。除第一张图片及其标题外，图片2和图片3的标题不符合他们的css代码。如果让我知道我的错误，我真的很感激。

HTML code：

<!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="design.css" media="all">
  <meta charset="UTF-8">
  <title>First website</title>
</head>
<body>
  <header>
  <div id="main-menu">
   <a href="#Markup languages and scripting"> M&S </a>
   <a href="#Health & saftely issues when working with computers"> Health&Saftely </a>
   <span id="dropbtn">
    <button id="clickable-button">U&C</button>
      <div id="dropdown-content">
        <a href="#1">Statistics and backgroud information</a>
        <a href="#2">Research groups / research projects</a>
        <a href="#3">Courses</a>
      </div>
   </span>
   <a href="aboutUs.html"> About us </a>
  </div>
  </header>
  <section>
    <div id="text-aboutUs">
      <p>In this page, you can find some information regarding to each member of this group. This information includes their personal interests, hobbies and some other intriguing information about the selected person. In order to access the information you just need to click on your intended person.</p> 
      <figure>
       <a href="#123"> <img src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg" width="300" height="350" alt="Hossein's photo" ></a>
       <figcaption> Jack Ferreni</figcaption>
      </figure>
    </div>
    <div id="pic2">
      <figure>
        <a href="#123"> <img src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg" width="300" height="350" alt="Hossein's photo" ></a>
       <figcaption>Jack Ferreni</figcaption>
      </figure>
     </div>
     <div id="pic3">
      <figure>
        <a href="#123"> <img src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg" width="300" height="350" alt="Hossein's photo" ></a>
       <figcaption> Jack Ferreni</figcaption>
      </figure>
     </div>
  </section>
  <footer> 


</body>

CSS代码：

body{
      background-color:#333333;
    }
header{
        background-color:black; 
        margin-left:200px;
        margin-right:200px;
        margin-top:20px;
        padding-top:100px;
      }
section{
        background-color:#eff8fb; 
        margin-left:200px;
        margin-right:200px;
        border:10px solid black;
        padding-bottom:20px;
       } 
footer{
        background-color:black; 
        margin-left:200px;
        margin-right:200px;
        margin-bottom:20px;
        padding-bottom:100px;
        border:10px solid black;
       }
#text-aboutUs > p{
                  color:black;
                  padding-left:30px;
                  padding-right:15px;
                  padding-top:0px;
                  margin-top:0px;
                 }
#text-aboutUs > P:first-letter{
                               font-size:3em;
                              }
#text-aboutUs > figure > a > img{
                                  position: absolute;
                                  left:500px;
                                  top:270px;
                                }
#text-aboutUs > figure > a > img:hover{
                                    border:10px ridge black;
                                  }
#text-aboutUs >  figure > figcaption{
                                     margin-left:300px;
                                     margin-top:420px;
                                     font-family:sans-serif;
                                     font-style:italic;
                                     font-size:20px;
                                    }
#pic2 > figure > a > img{
                          position:relative;
                          top:50px;
                          left:140px;
                          padding-bottom:130px;

                        }
#pic2 > figure > a > img:hover{
                                    border:10px ridge black;
                              }
#pic2 >  figure > figcaption{        
                               margin-top:0px;    
                               margin-left:400px;
                               font-family:sans-serif;
                               font-style:italic;
                               font-size:20px;
                             }
#pic3 > figure > a > img{
                          position: absolute;
                          left:1100px;
                           top:270px;
                        }
#pic3 > figure > a > img:hover{
                                    border:10px ridge black;
                              }
#pic3 >  figure > figcaption{  
                              margin-left:600px;
                              margin-top:0px
                              font-family:sans-serif;
                              font-style:italic;
                              font-size:20px;
                             }

Answer 1

影响该问题的一些问题导致标题直接位于图像下方

您在锚点容器中有一个绝对的图像位置。因此，容器只会调整其大小以适应无花果标题。删除此位置：绝对

在每个无花果标题上设置上边距和左边距。这导致标题与图像保持距离并向右移动。删除它。

最后在图元素上添加一个文本对齐中心，使标题在下方和中间对齐。

请参阅下面的代码段

body {
  background-color: #333333;
}

header {
  background-color: black;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 20px;
  padding-top: 100px;
}

img {
  width: 100%;
  height: 100%;
}

section {
  background-color: #eff8fb;
  margin-left: 200px;
  margin-right: 200px;
  border: 10px solid black;
  padding-bottom: 20px;
}

footer {
  background-color: black;
  margin-left: 200px;
  margin-right: 200px;
  margin-bottom: 20px;
  padding-bottom: 100px;
  border: 10px solid black;
}

#text-aboutUs>p {
  color: black;
  padding-left: 30px;
  padding-right: 15px;
  padding-top: 0px;
  margin-top: 0px;
}
figure{
text-align: center;
}

#text-aboutUs>P:first-letter {
  font-size: 3em;
}

#text-aboutUs>figure>a>img {}

#text-aboutUs>figure>a>img:hover {
  border: 10px ridge black;
}

#text-aboutUs>figure>figcaption {
  font-family: sans-serif;
  font-style: italic;
  font-size: 20px;
}

#pic2>figure>a>img {
  position: relative;
}

#pic2>figure>a>img:hover {
  border: 10px ridge black;
}

#pic2>figure>figcaption {
  font-family: sans-serif;
  font-style: italic;
  font-size: 20px;
}

#pic3>figure>a>img:hover {
  border: 10px ridge black;
}

#pic3>figure>figcaption {
  margin-left: 600px;
  margin-top: 0px font-family:sans-serif;
  font-style: italic;
  font-size: 20px;
}

<!DOCTYPE html>

<head>
  <link rel="stylesheet" type="text/css" href="design.css" media="all">
  <meta charset="UTF-8">
  <title>First website</title>
</head>

<body>
  <header>
    <div id="main-menu">
      <a href="#Markup languages and scripting"> M&S </a>
      <a href="#Health & saftely issues when working with computers"> Health&Saftely </a>
      <span id="dropbtn">
    <button id="clickable-button">U&C</button>
      <div id="dropdown-content">
        <a href="#1">Statistics and backgroud information</a>
        <a href="#2">Research groups / research projects</a>
        <a href="#3">Courses</a>
      </div>
   </span>
      <a href="aboutUs.html"> About us </a>
    </div>
  </header>
  <section>
    <div id="text-aboutUs">
      <p>In this page, you can find some information regarding to each member of this group. This information includes their personal interests, hobbies and some other intriguing information about the selected person. In order to access the information you
        just need to click on your intended person.</p>
      <figure>
        <a href="#123"> <img src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg" width="300" height="350" alt="Hossein's photo"></a>
        <figcaption> Jack Ferreni</figcaption>
      </figure>
    </div>
    <div id="pic2">
      <figure>
        <a href="#123"> <img src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg" width="300" height="350" alt="Hossein's photo"></a>
        <figcaption>Jack Ferreni</figcaption>
      </figure>

通过css和html使用图片来处理figcaption

1 个答案: