一，属性介绍

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. vue3+ts打开echarts的正确方式

    实例项目使用 vite5 + vue3 + ts,项目地址 vite-vue3-charts,预览地址 https://weizwz.com/vite-vue3-charts 准备工作 1. 注册为百 ...

  2. java：JDBC使用步骤（mysql）java小白的第一篇博客

    1:环境要求 先在你的mysql里面创造一个数据库(并添加一点数据) 下载并导入驱动 2:jdbc的五大步骤 第一步:加载mysql驱动: 1 Class.forName("com.mysq ...

  3. JavaFx之横向布局左右两侧对齐（十九）

    JavaFx之横向布局左右两侧对齐(十九) 横向布局HBox在子节点A.B中添加<HBox HBox.hgrow="ALWAYS"></HBox> 即可做到 ...

  4. 介绍下final ，finally 和 finalize三者的区别

    final,finally和finalize在Java中都是关键字,但它们的用途和含义都是完全不同的. final:final是一个修饰符,可以用于修饰类.方法和变量. 当final修饰一个类时,表示 ...

  5. mac phpbrew安装

    php 编译安装php 7.2.26 aliyun 镜像中心:https://developer.aliyun.com/mirror/ 1.安装brew /usr/bin/ruby -e " ...

  6. 深入浅出Sqoop之迁移过程源码分析

    [摘要]Sqoop是一种用于在Apache Hadoop和结构化数据存储(如关系数据库)之间高效传输批量数据的工具 .本文将简单介绍Sqoop作业执行时相关的类及方法,并将该过程与MapReduce的 ...

  7. 【火热招募】一文看懂华为云IoT Edge边缘计算开发者大赛技术亮点

    摘要:第二届边缘计算开发者大赛已启动,赛程时间将从9月持续到12月,华为云IoT Edge · 边云协同赛道奖金池高达40万元. 近日,第二届边缘计算开发者大赛已启动(查看启动仪式),全球揭榜挂帅火热 ...

  8. 性能提升1400+倍，快来看MySQL Volcano模型迭代器的谓词位置优化详解

    摘要:性能提升1400+倍,快来看MySQL Volcano模型迭代器的谓词位置优化详解. 本文分享自华为云社区<华为云数据库内核专家为您揭秘MySQL Volcano模型迭代器性能提升千倍的秘 ...

  9. Hive 报错 FAILED: SemanticException [Error 10096]: Dynamic partition strict mode requires at least one static partition column. To turn this off set hive.exec.dynamic.partition.mode=nonstrict —————

    hive中设置 set hive.exec.dynamici.partition=true; set hive.exec.dynamic.partition.mode=nonstrict;

  10. Solon2 常用注解之 @Component 与 @Bean 的区别

    @Component 与 @Bean 设计的目的是一样的,都是注册 Bean 到容器里. 1.@Component 注解 及它的子类型 @Configuration,@Controller,@Remo ...