css - 通过css和html将figcaption与图片匹配-6ren

css - 通过css和html将figcaption与图片匹配

转载作者：行者123 更新时间：2023-11-28 03:58:53

在这段代码中，我试图为每张图片写一个标题。除第一张图片及其标题外，图片 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;
                             }

最佳答案

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

您在 anchor 容器中有一个绝对图像位置。因此，容器只会调整其大小以适合无花果标题。删除此position:absolute

在每个图标题上都设置了顶部和左侧的边距。这导致标题与图像保持距离并向右移动。把这个也去掉。

最后在 figure 元素上添加一个 text-align center 以将标题居中对齐。

请看下面的片段

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/

文章推荐： javascript - watch 在 angularJs 中的指令链接内不起作用

文章推荐： html - 如何在 Perl 中从多个文件创建 HTML 文档？

文章推荐： JavaScript:如何检测是否选中了 HTML 复选框？

文章推荐： javascript - 页面加载时显示 div，完成后隐藏

javascript - 获取数据:图片/png；base64，{{图片}} net::ERR_INVALID_URL
我想使用 Angular.js 转换从服务器获取的图像数据(用于 ionic 框架)，我使用了这段代码: $http.post(link, { token: token,
javascript - IOS设备隐藏 "Play Store"图片，Android设备隐藏 "App Store"图片
我正在为我的应用制作一个登陆页面。如果它们在 iOS 设备上，我希望它只显示“App Store”图标，但在 Android 上隐藏它。如果它们在 Android 设备上，则只有“Play Store
JavaScript 图片
如何在同一页面上多次显示同一张图片？ function xdf(){ for (i=0;ihello world'); } } 此代码显示“hello world”10 次。我想要同样的东西，
css 图片
您好，我有一个 1px 的 png 文件，我试图将其设置为两个水平相邻的 div 的背景图像。html 和 css 如下:- hi hello css是这样的 div { width: 50%
image - PrestaShop 图片
我的 PHP 项目安装了 Prestashop 1.4.9.0。当我添加一个新产品时，我上传了一个PNG格式的图片，但是当它在客户端显示时，图片是JPG格式的。如何保留图片扩展名？最佳答案在后台
r - 发送表达式给网站返回动态结果(图片)
我用 http://www.regexper.com查看一个象形表示正则表达式很多。我想要一种理想的方法: 向站点发送正则表达式打开显示该表达式的站点例如，让我们使用正则表达式:"\\s*foo[
电子邮件问题中的 Phpmailer 图片
我不知道为什么在 MAC OS X (Mail 6.2) 的邮件客户端中图像显示如下: 和其他邮件客户端，如 gmail、outlook 或 private，图像是正确的，看起来像这样: PHP邮件程
javascript - 使用XPCOM上传网页文件/图片
我正在使用此处找到的示例。 Mozilla developers 我对这个例子很感兴趣。 function upload(postUrl, fieldName, filePath) { var f
电子邮件问题中的 Phpmailer 图片
我不知道为什么在 MAC OS X (Mail 6.2) 的邮件客户端中图像显示如下: 和其他邮件客户端，如 gmail、outlook 或 private，图像是正确的，看起来像这样: PHP邮件程
java - 如何根据javafx中的复选框选择生成按钮(图片)
我的问题是如何根据用户在javafx中选择的复选框和/或单选按钮生成带有汽车图片设置的按钮？我正在用汽车图片模拟汽车经销商网站。用户应该能够通过单击复选框和/或单选按钮选择来过滤显示的图片。我首先
java - 开发支持多语言的java客户端时优化jar文件大小(图片)
我正在开发Java客户端，它应该支持多种语言。为了翻译文本，我使用 Java ResourceBoundle，它工作正常。现在问题出在图像上。客户端应加载大约 50 张图像，这些图像是棋盘游戏的特定
jquery 褪色图片
我对 jQuery 还很陌生，但我正在寻找一个简单的脚本，通过淡入和淡出的方式在标题中循环 3 或 4 个背景图像。它们是透明的 png，因此我尝试过的许多 slider 都不起作用。有什么想法吗？
jQuery:选择器问题(图片)
我有一个 HTML 文档，其中包含本地文件的图像，例如: ios - 物理主体大于它分配给的纹理(图片)
我的 Sprite “physicsBody ”属性之一出现问题。我已经放置了physicsBody节点“barn ”，直接位于 non-physicsBody 之上节点“mound”没有任何问题。
c# - 获取图像的特定部分(图片)
我想剪切图片的特定部分并用它来将剪切的图像与存储在 HDD 中的另一个图像进行比较。问题是我不知道如何获取源图像的特定部分。我知道要裁剪的图像的位置 (X,Y)。最佳答案这将加载原始版本并创建
Javascript 图片 uploader
如何使用裁剪实用程序在 javascript 中实现图像 uploader 。你如何通过 AJAX 提交图像文件？解决方案是否跨域兼容？最佳答案要实现具有裁剪功能的图片上传小部件，您必须: 将图像
来自图库方向的 Android 图片
public void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityRes
java - 一个国家的可点击浮雕(图片)
我想在我的 android 应用程序中显示一个国家的图片。国家必须按地区划分。因此，当用户单击特定区域时，应打开特定屏幕。区域也应该用线分隔，以便用户可以看到区域的开始/结束位置。这是一个国家的例子
php - 在php中上传文件时发生错误(图片)
首先我想对这个问题表示歉意，因为我知道已经有很多人问过这个问题了。但我搜索的所有答案都没有解决我的问题。所以希望您考虑这个问题并帮助我解决这个问题。所以基本上我正在尝试上传图像文件，当我提交它时，会
MySQL:查询结果[图片]
我几乎有了想要的数据...但需要帮助过滤它。 (图在底部) 下面的查询返回状态为 Member-id5 的所有记录，但我需要对其进行过滤。例如:如果我对等做了一个简单的查询。 (exp_channel

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 通过css和html将figcaption与图片匹配