HTML+CSS常用页面布局

最新推荐文章于 2024-05-17 07:28:12 发布

啊啊啊啊啊啊啊啊啊啊啊1

最新推荐文章于 2024-05-17 07:28:12 发布

阅读量120

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_36153993/article/details/117777069

版权

1.中间固定宽度，两侧自适应 
1.1  flex布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body,div{
            height: 100%;
        }
        .left {
            background-color: #ccc;
            flex:1;
        }

        .middle {
            background-color: #75cc23;
            flex:0 0 400px;
        }

        .right {
            background-color: #cc3b38;
            flex:1;
        }
        .con{
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
<div class="con">
    <div class="left">

    </div>
    <div class="middle">

    </div>
    <div class="right">

    </div>
</div>

</body>

//也可以用这个样式

html,body,div{
    height: 100%;
}
.left {
    background-color: #ccc;
    flex-grow:1;
}

.middle {
    background-color: #75cc23;
    width:400px;
}

.right {
    background-color: #cc3b38;
    flex-grow:1;
}
.con{
    display: flex;
    justify-content: center;
}

1.2 calc+float

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body,div{
            height: 100%;
        }
        .left,.right {
            background-color: #ccc;
            float: left;
            width:calc((100% - 400px) / 2)
        }

        .middle {
            background-color: #75cc23;
            width:400px;
            float:left;
        }

        .right {
            background-color: #cc3b38;
          
　　　　 }
    </style>
</head>
<body>
<div class="con">
    <div class="left">

    </div>
    <div class="middle">

    </div>
    <div class="right">

    </div>
</div>

</body>
</html>

2.两边固定 中间自适应
2.1浮动布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>title</title>
    <style type="text/css">
        .con div{
            min-height: 200px;
        }
        .con .left{
            float: left;
            width: 300px;
            background: #72f5ff;
        }
        .con .right{
            float: right;
            width: 300px;
            background: #7aff73;
        }
        .con .middle{
            background: #ff2d21;
        }

    </style>
</head>
<body>

<div class="con">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle">

    </div>
</div>

</body>
</html>
2.2使用绝对定位

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>绝对定位布局</title>
    <style type="text/css">
        .con div{
            position: absolute;
            min-height: 200px;
        }
        .con .left{
            left: 0;
            width: 300px;
            background: red;
        }
        .con .right{
            right: 0;
            width: 300px;
            background: blue;
        }
        .con .middle{
            left: 300px;
            right: 300px;
            background: pink;
        }

    </style>
</head>
<body>

<div class="con">
    <div class="left"></div>
    <div class="middle">
    
    </div>
    <div class="right"></div>
</div>

</body>
</html>
2.3 flex布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>flex</title>
    <style type="text/css">
        .con{
            min-height: 200px;
            display: flex;
        }
        .con .left{
            width: 300px;
            background: red;
        }
        .con .right{
            width: 300px;
            background: blue;
        }
        .con .middle{
            flex-grow: 1;
            background: #ffa861;
        }

    </style>
</head>
<body>

<div class="con">
    <div class="left"></div>
    <div class="middle">
    </div>
    <div class="right"></div>
</div>

</body>
</html>

啊啊啊啊啊啊啊啊啊啊啊1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS常用页面布局

1.中间固定宽度，两侧自适应 1.1 flex布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html,body,div{ height: 100%; } .left { .
复制链接

扫一扫