一，属性介绍

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. 【C#】【命名空间（namespace）】.NET6.0后支持的顶级语句使用问题

    创建C#项目且使用.Net6.0以上的版本时,默认code会使用顶级语句形式: 1.略去static void Main(String[ ] args)主方法入口: 2.隐式使用(即隐藏且根据代码所需 ...

  2. Java反射，看完就会用

    什么是反射 在说反射概念之前,我们先说另外2个概念:编译期和运行期. 编译期: 编译期是源代码从文本形式转换为字节码的过程,这发生在Java代码被JVM执行之前. 在编译期,编译器对源代码进行语法检查 ...

  3. 通过JDK动态代理类实现一个类中多种方法的不同增强

    1.为什么说JDK动态代理必须要实现当前父接口才能使用 JDK动态代理是基于接口的代理,它要求目标类(被代理的类)必须实现一个或多个接口.这是因为JDK动态代理是通过创建目标类的接口的代理对象来实现的 ...

  4. CF1340F Nastya and CBS 题解

    题目大意 给定一个长度为 \(n(n \le 10 ^ 5)\) 的括号序列.要求支持两个操作: 修改某个位置的括号. 询问 \([l, r]\) 区间内的括号序列是否合法. 题目分析 显然,这道题是 ...

  5. [Python急救站]学生管理系统链接数据库

    相信很多人在初学Python的时候,经常最后作业就是完成一个学生管理系统,但是我们来做一个完美的学生管理系统,并且将数据储存到数据库里. 我们先看看我们的数据库怎么设置. 首先呢,我选择用的是SQL ...

  6. hiveSQL常见专题

    SQL强化 SQL执行顺序 --举例: select a.sex, b.city, count(1) as cnt, sum(salary) as sum1 from table1 a join ta ...

  7. 高性能网络设计秘笈：深入剖析Linux网络IO与epoll

    本文分享自华为云社区<高性能网络设计秘笈:深入剖析Linux网络IO与epoll>,作者: Lion Long . 一.epoll简介 epoll是Linux内核中一种可扩展的IO事件处理 ...

  8. 数仓实践丨主动预防-DWS关键工具安装确认

    摘要:gdb确认是否安装,所带来的该工具用户数据库实例触发core问题后集群状态反复异常,对此问题及时分析根因并及时进行规避. 本文分享自华为云社区<主动预防-DWS关键工具安装确认>,作 ...

  9. 一文为你详解Unique SQL原理和应用

    摘要:以一定的算法结合解析树中的各结点,计算出来一个整数值,用来唯一标识这一类SQL,这个整数值被称为Unique SQL ID,Unique SQL ID相同的SQL语句属于同一个"Uni ...

  10. JavaScript回调函数的高手指南

    摘要:本文将会解释回调函数的概念,同时帮你区分两种回调:同步和异步. 回调函数是每个前端程序员都应该知道的概念之一.回调可用于数组.计时器函数.promise.事件处理中. 本文将会解释回调函数的概念 ...