一，属性介绍

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. Python趣味入门10:推倒繁琐化烦为简的推导式

    前言 <西部世界>的德洛丽丝进入了MAZE迷宫,假设她需要列出一系列的平方数作为密码,来进入迷宫.在以往的代码生成类似的数列需要使用循环语句,写多行语句.Python有了推导式,只需要1句 ...

  2. 冲刺秋招之牛客刷Java记录第二天

    第一题 下列代码输入什么? public class Test { public static Test t1 = new Test(); { System.out.println("blo ...

  3. ASR项目实战-构建Kaldi

    准备工作 安装构建时依赖的基础软件 软件清单如下: bzip2 python3 automake libtool cmake gcc g++ gfortran git subversion 不同平台安 ...

  4. DDD落地实践-架构师眼中的餐厅 | 京东云技术团队

    本文以餐厅场景为叙事主线,以领域驱动为核心思想,结合架构设计与功能设计方法论.是从领域分析到落地的全过程案例,内容偏重于落地,因此不乏一些探讨,欢迎指正. 文章较长.全程干货.耐心读完.必有收获. 本 ...

  5. Python汉诺塔递归算法实现

    关于用递归实现的原理,请查看我之前的文章: C语言与汉诺塔 C#与汉诺塔 以下为代码: count = 0 def move(pile, src, tmp, dst): global count if ...

  6. 对比Spring Boot中的JdbcClient与JdbcTemplate

    本文我们一起看看Spring Boot中 JdbcClient 和 JdbcTemplate 之间的差异. 以下内容使用的Java和Spring Boot版本为: Java 21 Spring Boo ...

  7. 使用 C# 在Word中插入图表

    Word中的图表功能将数据可视化地呈现在文档中.这为展示数据和进行数据分析提供了一种方便且易于使用的工具,使作者能够以直观的方式传达信息.要通过C#代码来实现在Word中绘制图表,可以借助 Spire ...

  8. 来喽，来喽，Python 3.9正式版发布了~~~

    摘要:2020年10月5日,在全国人员欢度国庆节和中秋节时,Python 3.9 悄摸摸地正式发布了. 2020年10月5日,在全国人员欢度国庆节和中秋节时,Python 3.9 悄摸摸地正式发布了. ...

  9. IAP：物联网终端软件升级技术

    摘要:IAP是利用自己的程序代码实现升级程序(新的APP)从外部接口(可以是串口.I2C.SPI.网口等等)写入到flash中,再通过flash读写操作,将新的APP覆盖原有APP程序,在重新从新的A ...

  10. 想做DBA，多租户管理你一定要知道这些

    摘要:多租户为满足客户混合负载处理需求而生,通过提供两层用户机制,分层资源隔离,满足客户对计算和存储资源的自主控制需求. 本文分享自华为云社区<关于GaussDB(DWS)多租户管理,这些你一定 ...