一，属性介绍

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. springboot整合mybatis步骤思路

    /** * springboot整合mybatis步骤思路 * 依赖导入 * 建表 * 实体类 * mapper配置文件 * mapper接口 * yaml配置 * properties配置数据库连接 ...

  2. 春秋云镜 - CVE-2022-30887

    多语言药房管理系统 (MPMS) 是用 PHP 和 MySQL 开发的, 该软件的主要目的是在药房和客户之间提供一套接口,客户是该软件的主要用户.该软件有助于为药房业务创建一个综合数据库,并根据到期. ...

  3. Shell的概念、shebang、bash的概念

    什么是shell shell的作用是 解释执行用户输入的命令或程序等 用户输入一条命令,shell就解释一条 键盘输入命令,Linux给与响应的方式,称之为交互式 linux的计算机是如何跟用户进行交 ...

  4. Java中常用不可变类

    Java中常用的不可变类是指一旦被创建,它们的值就不可更改的类.在实际开发中,使用不可变类时可以带来多种优点,比如线程安全.缓存.副本等.下面我们将介绍Java中常见的不可变类: 1.字符串(Stri ...

  5. 2021-01-16：我截获了登录token的话，是不是就获得了登录状态，这样就不安全了。如何保证安全？

    福哥答案2021-01-06: 知乎答案: 首先,Token 一般放在 Header 或者 Cookies 中,Http 是明文传输,Https 是密文传输.可以一定程度防止Token 截获. 第二, ...

  6. 浏览器工作原理和实践（二）——JavaScript

    <浏览器工作原理与实践>是极客时间上的一个浏览器学习系列,在学习之后特在此做记录和总结. 一.执行流程 实际上变量和函数声明在代码里的位置是不会改变的,而且是在编译阶段被 JavaScri ...

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

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

  8. Karmada 结合 coreDNS 插件实现跨集群统一域名访问

    本文分享自华为云社区<Karmada 结合 coreDNS 插件实现跨集群统一域名访问>,作者:云容器大未来 . 在多云与混合云越来越成为企业标配的今天,服务的部署和访问往往不在一个 K8 ...

  9. 详解GaussDB(DWS)的query_band负载识别与应用

    摘要:query_band是一个会话级别(session)的GUC参数,本身是字符串类型,支持任意形式字符组合. 本文分享自华为云社区<GaussDB(DWS)的query_band负载识别与应 ...

  10. 鱼和熊掌兼得：C++代码在编译时完成白盒测试

    摘要:如果能够让代码在编译的时候,自动完成白盒测试,这不是天方夜谭. 白盒测试也叫开发者测试,是对特定代码函数或模块所进行的功能测试.当前主流的白盒测试方法是:先针对仿真或者生产环境编译出可执行文件, ...