一，属性介绍

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 图片相关

    python 图片相关 本篇介绍两种方式来打开图片. 1: 使用matplotlib #!/usr/bin/python3 # -*- coding: UTF-8 -*- ""&q ...

  2. 一个Tomcat 如何部署多个项目？附多种解决方案及详细步骤！

    此文源自一次多年前面试的面试题,民工哥将它总结出来分享给大家,希望对大家有所帮助,或者今后的面试中说不定会用的上. 首先,我们了解一下常见的Java Web服务器. Tomcat:由Apache组织提 ...

  3. Ubuntu 之 7zip使用

    1.安装 sudo apt-get install p7zip 2.压缩 7zr a xxx foldername 3.解压缩 7zr x xxx.7z 4.zip命令压缩文件夹 zip -qr xx ...

  4. 最新系统MacOs13 Ventura(M1/M2芯片) + Parallels Desktop 18(PD18史上最强虚拟机)永久使用攻略

    众神殿内,高朋满座,胜友如云,Vmware.VirtualBox.Utm等虚拟机大神群英荟萃,只见位于C位王座上的Parallels怅惘抬头,缓缓逡巡,睥睨群小,目光到处,无人敢抬头对视. 是的,如果 ...

  5. 数据安全无小事：揭秘华为云GaussDB(openGauss)全密态数据库

    摘要:全密态数据库,专门处理密文数据的数据库系统,数据以加密形态存储在数据库服务器中,数据库支持对密文数据的检索与计算. 1.云数据库安全现状及问题 伴随着云基础设施的快速增长和成熟,与之对应的云数据 ...

  6. 详解KubeEdge边缘网络项目EdgeMesh

    摘要:本文带大家进一步了解 EdgeMesh 的进展以及未来的规划. 本文分享自华为云社区<走向成熟的KubeEdge边缘网络项目EdgeMesh详解>,作者:华为云云原生团队 王杰章 . ...

  7. JS的深浅复制，原来如此！

    摘要:之所以会出现深浅拷贝的问题,实质上是由于JS对基本类型和引用类型的处理不同. 本文分享自华为云社区<js的深浅复制,一看就明白>,作者: 鑫2020. 浅复制的意思 浅复制是仅仅对数 ...

  8. 浏览器史话中chrome霸主地位的奠定与国产浏览器的割据混战

    作为前端老鸟,从IE的6.7.8开始做前端,各种兼容性折磨死人.js还好有了jQuery.chrome出来后,真是救苦救难,解救程序员的于水火.但是可恶的boss还是要求兼容ie6,7.感谢淘宝团队的 ...

  9. 再谈BOM和DOM(7):HTML DOM Event 对象属性及DOM事件详细列表

    之前写<再谈BOM和DOM(4):HTML DOM Event 对象>时候,对event对象及各种dom事件没有详细道来,这里些表格.备查. Event 对象 Event 对象代表事件的状 ...

  10. Gartner 权威预测未来4年网络安全的8大发展趋势

    翻译:SEAL安全 原文标题: Gartner Unveils the Top Eight Cybersecurity Predictions for 2022-23 原文链接: https://ww ...