CSS常见基础布局(满屏布局，左右，左中右布局）

最新推荐文章于 2024-05-18 16:11:19 发布

ProgrammarQin

最新推荐文章于 2024-05-18 16:11:19 发布

阅读量2.2k

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/ProgramarQin/article/details/98317131

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、满屏布局

<!DOCTYPE html>
<html>

<head>
    <title>满屏</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .container{
            width:100%;
            height:100%;
            background:#ccc;
          }
    </style>
</head>

<body>
    <div class="container"></div>
</body>

</html>

2、左右布局，左边自适应右边宽度固定，如200px

（1）定位
<!DOCTYPE html>
<html>

<head>
    <title>左右</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .left {
            height: 100%;
            background: #ddd;
            padding-right: 200px;
        }

        .right {
            width: 200px;
            height: 100%;
            background: #000;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>

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

</html>

（2）浮动
<head>
    <title>左右</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .left {
            background: #ddd;
            height: 100%;
        }

        .right {
            width: 200px;
            float: right;
            height: 100%;
            background: #000;
        }
    </style>
</head>

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

</html>

（3）flex布局
<head>
    <title>左右</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        html,
        body,.container {
            width: 100%;
            height: 100%;
        }
        .container{
            display:flex;
            display:-webkit-flex;
        }
        .right{
            flex:0 0 200px;
            height:100%;
            background:#000;
        }
        .left{
            background:#ddd;
            height:100%;
            flex:1;/*div占据所有剩余宽度 */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

3、左中右布局

(1)定位
<!DOCTYPE html>
<html>

<head>
    <title>左中右</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .right,.left{
            position: absolute;
            top: 0;
            width: 200px;
            bottom: 0;
            z-index: 100;
            background: #ddd;
            border:1px solid #000;
        }
        .middle{
            height:100%;
            background:coral;
            padding:0 200px 0 200px;
        }
        .left {
         left:0;
        }
        .right{
            right:0;
        }
    </style>
</head>

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

</html>

(2)浮动
<!DOCTYPE html>
<html>

<head>
    <title>左中右</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .left,
        .right {
            width: 200px;
            height: 100%;
            background: #ddd;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .middle {
            background: #00ddff;
            height: 100%;
        }
    </style>
</head>

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

</html>

<!DOCTYPE html>
<html>

<head>
    <title>左中右</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        html,
        body,
        .container {
            width: 100%;
            height: 100%;
        }
        .container{
            display:flex;
        }
        .middle{
            flex:1;
            background:#ddd;
        }
        .left {
            flex:0 0 200px;
            background:#000;
        }
        .right {
            flex:0 0 200px;
            background:#000;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

ProgrammarQin

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS常见基础布局(满屏布局，左右，左中右布局）

1、满屏布局<!DOCTYPE html><html><head> <title>满屏</title> <style> * { margin: 0; padding: 0; } html, ...
复制链接

扫一扫