html建三个方块居中横向排列

待到秋来万花杀

于 2024-12-20 16:45:29 发布

阅读量231

点赞数 3

文章标签： html css css3

本文链接：https://blog.csdn.net/haitao3098/article/details/144614762

版权

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianxi</title>
    <style>
        .bordered-box {
            border: 2px solid black; /* 设置边框为1像素的实线 */
            width: 1000px; /* 设置宽度为400像素 */
            height: 600px; /* 设置高度为400像素 */
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
        }
        .Redbox{
            /*border: 1px solid black; !* 设置边框为1像素的实线 *!*/
            width: 40px; /* 设置宽度为400像素 */
            height: 40px; /* 设置高度为400像素 */
            background-color: red;
        }
        .Greenbox{
            width: 40px; /* 设置宽度为400像素 */
            height: 80px; /* 设置高度为400像素 */
            background-color: green;
        }
        .Bluebox{
            width: 40px; /* 设置宽度为400像素 */
            height: 40px; /* 设置高度为400像素 */
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="bordered-box">
    <div class="Redbox"></div>
    <div class="Greenbox"></div>
    <div class="Bluebox"></div>
</div>
</body>
</html>