HTML5 布局

最新推荐文章于 2024-03-08 15:37:52 发布

LyaJpunov

最新推荐文章于 2024-03-08 15:37:52 发布

阅读量385

点赞数

分类专栏： # HTML5 文章标签： html5 css css3 前端

本文链接：https://blog.csdn.net/weixin_43903639/article/details/121780511

版权

HTML5 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文介绍了两种实现两栏布局和三栏布局的方法。在两栏布局中，通过浮动元素和设置margin实现；在三栏布局中，利用calc()函数动态计算宽度，调整元素位置。这些布局技巧对于前端开发者来说是构建响应式网页的基础。

摘要由CSDN通过智能技术生成

两栏布局

方案一

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body,html{
            height: 100%;
        }

        .box1{
            width: 200px;
            height: 100%;
            background-color: tomato;
            float: left;
        }
        .box2{
            /*box2不能设置宽度，否则的话就没有自适应了*/
            height: 100%;
            margin-left: 200px;
            background-color: thistle;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
<div class="box2"></div>
</body>
</html>

方案二

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body,html{
            height: 100%;
        }

        .box1{
            width: 200px;
            height: 100%;
            background-color: tomato;
            float: left;
        }
        .box2{
            /*calc 用于动态计算长度值，前后必须留空格 这个函数支持加减乘数的运算*/
            height: 100%;
            width: calc(100% - 200px);
            background-color: thistle;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
<div class="box2"></div>
</body>
</html>

三栏布局

方案一

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body,html{
            height: 100%;
        }

        .box1{
            width: 200px;
            height: 100%;
            background-color: tomato;
            float: left;
        }
        .box2{
            /*calc 用于动态计算长度值，前后必须留空格*/
            height: 100%;
            width: calc(100% - 400px);
            background-color: thistle;
            float: left;
        }
        .box3{
            height: 100%;
            width: 200px;
            background-color: antiquewhite;
            float: left;
        }
    </style>
</head>

<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

方案二

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body,html{
            height: 100%;
        }

        .box1{
            width: 200px;
            height: 100%;
            background-color: tomato;
            float: left;
        }
        .box2{
            /*calc 用于动态计算长度值，前后必须留空格*/
            height: 100%;
            width: 100%;
            background-color: thistle;
            margin-left: 200px;
            margin-right: 200px;
        }
        .box3{
            height: 100%;
            width: 200px;
            background-color: antiquewhite;
            float: right;
        }
    </style>
</head>

<body>
<div class="box1"></div>
<div class="box3"></div>
<div class="box2"></div>

</body>
</html>