浮动列表布局

GT-一二

已于 2022-10-18 14:59:53 修改

阅读量217

点赞数 1

分类专栏： CSS基础文章标签：前端 javascript html

于 2022-10-18 14:49:42 首次发布

本文链接：https://blog.csdn.net/AAAAA1235555/article/details/127388489

版权

CSS基础专栏收录该内容

24 篇文章 2 订阅

订阅专栏

浮动列表布局

1样式
- 1.1样式一
- 1.2样式二
2代码
- 2.1代码一
- 2.2代码二

1样式

1.1样式一

在这里插入图片描述

1.2样式二

在这里插入图片描述

2代码

2.1代码一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 90%;
            margin: 0 auto;
            background-color: silver;
        }
        dl,dt,dd{
            margin: 0;
            padding: 0;
        }
        dl{
            width: 100%;
            height: 100px;
            border: blue dashed 1px;
        }
        dl:nth-child(even){
            background-color: rgba(12, 180, 252, 0.358);
        }
        dt,dd{
            margin: 0;
            padding: 0;
            width: 45%;
            height: 100px;
            border: red solid 1px;
        }
        dt{
            float: left;
        }
        dd{
            float: right;
        }
    </style>
</head>
<body>
    <div>
        <dl>
            <dt>dt</dt>
            <dd>dd</dd>
        </dl>
        <dl>
            <dt>dt</dt>
            <dd>dd</dd>
        </dl>
        <dl>
            <dt>dt</dt>
            <dd>dd</dd>
        </dl>
        <dl>
            <dt>dt</dt>
            <dd>dd</dd>
        </dl>
    </div>
</body>
</html>

2.2代码二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 90%;
            margin: 0 auto;
            background-color: silver;
        }
        dl,dt,dd{
            margin: 0;
            padding: 0;
        }
        dl{
            width: 100%;
            height: 100px;
            border: blue dashed 1px;
        }
        dl:nth-child(even){
            background-color: rgba(12, 180, 252, 0.358);
        }
        dt,dd{
            margin: 0;
            padding: 0;
            width: 30%;
            height: 100px;
            border: red solid 1px;
        }
        dt{
            float: left;
        }
        dd{
            float: right;
        }
    </style>
</head>
<body>
    <div>
        <dl>
            <dt>dt</dt>
            <dd>dd1</dd>
            <dd>dd2</dd>
        </dl>
        <dl>
            <dt>dt</dt>
            <dd>dd1</dd>
            <dd>dd2</dd>
        </dl>
        <dl>
            <dt>dt</dt>
            <dd>dd1</dd>
            <dd>dd2</dd>
        </dl>
        <dl>
            <dt>dt</dt>
            <dd>dd1</dd>
            <dd>dd2</dd>
        </dl>
    </div>
</body>
</html>