一，属性介绍

1. 浏览器支持

注释：Internet Explorer 8 以及更早的版本不支持 <figure> 标签。Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 <figure> 标签。

2. 定义和用法

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 figure 元素的标题（caption）。

"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

二， 实战

1. 效果图

2. 代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        img{

            max-width: 100%;

            vertical-align: middle;

        }

        figure{

            background-color: blueviolet;

            display: block;

        }

        figcaption{

            padding: 10px;

            text-align: center;

            font-weight: 800;

            font-family: serif;

            color: aliceblue;

        }

    </style>

</head>

<body>

    <figure>

        <figcaption>图片说明</figcaption>

        <img src="./wallhaven-839kvo.jpg" alt="">

    </figure>

    <figure>

        <img src="./wallhaven-839kvo.jpg" alt="">

        <figcaption>图片说明</figcaption>

    </figure>

</body>

</html>

css - 使用 figure 和 figcaption 快速实现 图片加文字的垂直方向的布局 ( 不支持ie9以下版本 )的更多相关文章

  1. PHP给图片加文字水印

    <?php /*给图片加文字水印的方法*/ $dst_path = 'http://f4.topitme.com/4/15/11/1166351597fe111154l.jpg'; $dst = ...

  2. Java图片加文字水印

    Java图片加文字水印 import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.I ...

  3. C#给图片加文字水印

    public class TxtWaterMark { public enum WaterPositionMode { LeftTop,//左上 LeftBottom,//左下 RightTop,// ...

  4. ASP.NET(C#)图片加文字、图片水印，神啊，看看吧

    ASP.NET(C#)图片加文字.图片水印 一.图片上加文字: //using System.Drawing; //using System.IO; //using System.Drawing.Im ...

  5. php给图片加文字

    在图片上加文字是论坛,博客,新闻网站上最喜欢用的功能,防止盗图.这里看看代码是如何实现的. 首先还是upload_image.php这个文件,注意这里的caption文本框中输入的内容最终会写到图片上 ...

  6. C#给图片加文字和图片的水印

    /// <summary> /// WaterMark 的摘要说明 /// </summary> /// 图片加水印 /// <param name="strC ...

  7. Android给图片加文字和图片水印

    我们在做项目的时候有时候需要给图片添加水印,水寒今天就遇到了这样的问题,所以搞了一个工具类,贴出来大家直接调用就行. /** * 图片工具类 * @author 水寒 * 欢迎访问水寒的个人博客:ht ...

  8. PHP图片加文字水印和图片水印方法（鉴于李老师博客因没加水印被盗，特搜集的办法。希望能有用！）

    $dst_path = 'dst.jpg'; //创建图片的实例 $dst = imagecreatefromstring(file_get_contents($dst_path)); //打上文字 ...

  9. PHP给图片加文字（水印）

    准备工作: 代码: <?php header("Content-type: image/jpeg"); //浏览器输出,如不需要可去掉此行 $im = @imagecreat ...

  10. PHP图片加文字水印和图片水印方法

    文字水印 $dst_path = 'dst.jpg'; //创建图片的实例$dst = imagecreatefromstring(file_get_contents($dst_path)); //打 ...

随机推荐

  1. 在 IIS 上生成经典 ASP 网站

    场景:在 IIS 上生成经典 ASP 网站 本文档将指导你完成安装 IIS 和配置经典 ASP 网站的过程. 经典 ASP 是服务器端脚本环境,可用于创建和运行动态 Web 应用程序. 借助 ASP, ...

  2. ASR项目实战-方案设计

    对于语音识别产品的实施方案,给出简易的业务流程,仅供参考. 如下流程图,可以使用如下两个站点查看. web chart Web Sequence Diagrams 文件转写 创建文件转写任务 客户应用 ...

  3. CSS3学习笔记-选择器

    在CSS中,选择器是一种指定一个或多个元素的方法.可以根据元素的类型.类.ID.属性等特征来选择元素.CSS3引入了很多新的选择 器,让我们可以更加灵活和精准地选择元素. 下面介绍一些常用的CSS3选 ...

  4. Java 查找并替换PDF中的指定文本

    本文介绍通过Java程序批量替换PDF中的指定文本内容. 1. 程序环境准备如下: 程序使用环境如图,需要注意的是,本文使用了免费版的PDF jar工具:另外JDK版本建议使用高版本更佳.   jar ...

  5. 教你如何基于MindSpore进行ChatGLM微调

    本文分享自华为云社区<基于MindSpore的ChatGLM微调>,作者: JeffDing . 基于MindSpore的ChatGLM微调 克隆Hugging Face模型 克隆chat ...

  6. 论文分享丨Holistic Evaluation of Language Models

    摘要:该文为大模型评估方向的综述论文. 本文分享自华为云社区<[论文分享]<Holistic Evaluation of Language Models>>,作者:DevAI. ...

  7. 实践GoF的设计模式：访问者模式

    摘要:访问者模式的目的是,解耦数据结构和算法,使得系统能够在不改变现有代码结构的基础上,为对象新增一种新的操作. 本文分享自华为云社区<[Go实现]实践GoF的23种设计模式:访问者模式> ...

  8. 震惊，PostGIS还可以这样用！！！

    摘要:PostGIS为PostgreSQL提供了空间数据库分析能力,是目前业界主流的地理数据库之一,提供如下空间信息服务功能:空间对象.空间索引.空间操作函数和空间操作符等.在GaussDB 中,目前 ...

  9. Gzip之后继者Brotli浅析之CDN厂商的智能压缩，服务器Brotli设置

    "智能压缩"按照又拍云的说法是,同时支持 Gzip 和 Brotli 压缩算法.根据用于浏览器开启自动选择不同压缩方式. Gzip 压缩算法 Gzip 基于 DEFLATE 算法, ...

  10. 企业如何高效平滑迁移数据？火山引擎DataLeap上线整库搬迁解决方案

     更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   近日,火山引擎大数据研发治理套件DataLeap上线整库搬迁解决方案,包括整库离线同步.整库实时同步两大能力 ...