一，属性介绍

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. TiDB故障处理之让人迷惑的Region is Unavailable

    背景 最近某集群扩容了一批物理机,其中 TiKV 节点有6台机器12个实例,同时调整了 label 设置增加了一层机柜级容灾.因为前期做了比较充分的准备工作,到了变更窗口只等着执行scale-out就 ...

  2. Spring Boot入坑-1-入坑准备&Spring简介

    [写在前面] 长期做基于Spring Boot的企业应用,计划将与应用相关的技术点,通过简介.步骤.示例的方式,记录并分享出来,用于作为Spring Boot入门的记录与教程 计划的内容有: Spri ...

  3. 全网最全的华为ensp数通设备命令全集

    [命令] display history-command [视图]所有视图 [参数]无 [描述] display history-command 命令用来显示当 前用户曾键入的最后 10 条命令.用户 ...

  4. 十分钟教你在 k8s 中部署一个前后端应用

    转载至我的博客https://www.infrastack.cn ,公众号:架构成长指南 大家好,我是蜗牛哥,好多开发人员,尤其是没接触过 k8s 的人员对如何在k8s中部署一个 前后端应用很模糊,不 ...

  5. 再获殊荣！华为云GaussDB喜提“科技进步一等奖”

    摘要:近日,中国电子学会科学技术奖励大会颁发了2021-2022年度中国电子学会科学技术奖获奖项目,华为云主导的"GaussDB智能云原生分布式数据库"项目荣获"科技进步 ...

  6. 云小课｜手把手教您在PyCharm中连接云端资源进行代码调试

    摘要:让我们看看如何在PyCharm中连接云端资源进行代码调试吧! 本文分享自华为云社区<[云小课]EI第54课 手把手教您在PyCharm中连接云端资源进行代码调试>,作者:Hello ...

  7. 据说有人面试栽在了Thread类的stop()方法和interrupt()方法上

    摘要:今天就简单的说说Thread类的stop()方法和interrupt()方法到底有啥区别. 本文分享自华为云社区<[高并发]又一个朋友面试栽在了Thread类的stop()方法和inter ...

  8. linux 账号管理 添加用户与修改用户权限与密码

    添加用户 useradd zhoulujun 修改用户密码 passwd  zhoulujun 修改用户组 usermod -g root  zhoulujun 记住这个几个就够了--

  9. HanLP 学习

    学习 HanLP 需要了解, 双数组Trie树 (Double-array Trie) Aho-Corasick DoubleArrayTire 算法 ACDAT - 基于双数组字典树的AC自动机 T ...

  10. Hadoop面试题总结（二）——HDFS

    1. HDFS 中的 block 默认保存几份? 默认保存3份 2.HDFS 默认 BlockSize 是多大? 默认64MB 3.负责HDFS数据存储的是哪一部分? DataNode负责数据存储 4 ...