在这段代码中，我试图为每张图片写一个标题。除第一张图片及其标题外，图片 2 和 3 的标题不符合其 css 代码。如果让我指出我的错误，我将不胜感激。
HTML代码:
<!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;
}
最佳答案
影响的一些问题导致标题直接位于图像下方
请看下面的片段
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 - 通过css和html将figcaption与图片匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43308805/