(dl>dt+dd)自定义列表的使用\制作图片+标题列表方便(亲测)

最新推荐文章于 2024-07-16 15:01:21 发布

原创最新推荐文章于 2024-07-16 15:01:21 发布 · 5.9k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

QQ:109576764

css 同时被 3 个专栏收录

13 篇文章

订阅专栏

layui

4 篇文章

订阅专栏

web开发

3 篇文章

订阅专栏

本文介绍如何使用HTML的dl、dt和dd标签创建图片加标题的列表，并通过浮动属性实现布局。强调dt内不可放块级标签，dd内可容纳任意标签，同时提醒需设置box-sizing属性以确保布局均匀。

只需要定义1个dl标签，在dt标签内添加分别添加相应的图片，在dd标签内添加p标签或者span标签或者其他可以添加文字的标签，再给dt和dd添加浮动属性（float:left;）即可。值得注意的是dd标签内可以添加任意其他标签，但是dt标签内不能添加块级标签只能添加行级或行内块级标签。

平均三列可以多打几位33.333%减少误差，哈，还有就是必须box-sizing必须设置不然不能平均噢。
---------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        img {
            display: block
        }
    
        dl {
            overflow: hidden;
            border: 1px solid rgb(224, 32, 32);
            padding: 5px;
            margin: 5px 5px;
        }
    
        dd {
            padding: 10px 10px;
        }
    
        dt,dd {
            float: left;
        }
 
    </style>
<dl>
    <dt><img
            src="http://pic.weather.com.cn/images/cn/photo/2019/03/22/20190322154300F54F89B020C984044C290524D80230B2_s.jpg" />
    </dt>
    <dd>
        <a>
            <h3> 松花江雪后最美落日</h3>
        </a>
        <p>中国天气网 2019-03-22 15:40</p>
    </dd>

</dl>

<dl>
    <dt>
        <img
            src="http://pic.weather.com.cn/images/cn/photo/2019/03/22/20190322154300F54F89B020C984044C290524D80230B2_s.jpg">
    </dt>
    <dd>
        <a>
            <h3> 松花江雪后最美落日</h3>
        </a>
        <p>中国天气网 2019-03-22 15:40</p>
    </dd>

</dl>


<hr>
平均三列 可以么？<br>
<style>
.md33 dd{width:33.333%;text-align: center;box-sizing: border-box;border:1px solid green;}
</style>
<dl class="md33">
    <dd>1</dd>
    <dd>2</dd>
    <dd>3</dd>
</dl>

</body>
</html>