行列布局，部分固定，部分自适应原理总结

最新推荐文章于 2024-04-28 15:12:00 发布

圣诞老人村的来信

最新推荐文章于 2024-04-28 15:12:00 发布

阅读量734

点赞数 1

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/Corazhang/article/details/75578244

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

有好多种情况，比如三行布局，上下固定，中间自适应，好多移动端app是这种原理，各种情况有好几种方法，都是很简单的原理，但是其中的方法不能都想出来，篇幅比较长(代码可直接运行)

一、两列布局，左侧固定，右侧自适应

1、左侧设置浮动（脱离文档流），右侧设置margin-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #left{
            width: 300px;
            background: #ff0000;
            height: 400px;
            display: table-cell;
        }
        #right{
            background: #00ff00;
            height: 400px;
            display: table-cell;
        }
        #main{
            display: table;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

2、左侧绝对定位，脱离文档流，对右侧设置margin-left,
可以使两者水平对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #left{
            width: 300px;
            background: #ff0000;
            height: 400px;
            /*position: absolute;!* fixed *!*/
        }
        #right{
            background: #00ff00;
            height: 400px;
            margin-left: 310px;
        }
    </style>
</head>
<body>
    <div id="left"></div>
    <div id="right"></div>
</body>
</html>

3.利用弹性盒模型，flex-grow=1,让剩下的元素使用剩余空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #left{
            width: 300px;
            background: #ff0000;
            height: 400px;
        }
        #right{
            background: #00ff00;
            height: 400px;
            flex-grow: 1;
            margin-left: 10px;
        }
        #main{
            display: flex;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

4、直接设置右侧元素的margin-left和margin-top(为负)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #left{
            width: 300px;
            background: #ff0000;
            height: 400px;
        }
        #right{
            background: #00ff00;
            height: 400px;
            margin-left: 310px;
            margin-top: -400px;
        }

    </style>
</head>
<body>
    <div id="left"></div>
    <div id="right"></div>
    <h1>hhhh</h1>
</body>
</html>

5、利用表格让两个块级元素在一行
display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性(这个之前没有接触过，第一次用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #left{
            width: 300px;
            background: #ff0000;
            height: 400px;
            display: table-cell;
        }
        #right{
            background: #00ff00;
            height: 400px;
            display: table-cell;
        }
        #main{
            display: table;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

二、三列布局，左右固定，中间自适应

1、左边元素左浮，右边元素右浮，中间元素设置margin：上下左右；使它居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #left, #right{
            width: 300px;
            height: 400px;
            background: #ff0000;
        }
        #left{
            float: left;
        }
        #right{
            float: right;
        }
        #center{
            height: 400px;
            background: #00ff00;
            margin: 0 310px;
        }
    </style>
</head>
<body>
    <div id="left"></div>
    <div id="right"></div>
    <div id="center"></div>
</body>
</html>

2、利用弹性盒模型，别忘了让父元素允许被“分”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #left, #right{
            width: 300px;
            height: 400px;
            background: #ff0000;
        }
        #center{
            height: 400px;
            background: #00ff00;
            flex-grow: 1;
        }
        #main{
            display: flex;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

3、给左右的两个元素都定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #left{
            left: 0;
            top: 0;
        }
        #right{
            right: 0;
            top: 0;
        }
        #left, #right{
            width: 300px;
            height: 400px;
            background: #ff0000;
            position: absolute;
        }
        #center{
            height: 400px;
            background: #00ff00;
            margin: 0 310px;
        }
    </style>
</head>
<body>
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</body>
</html>

三、三行布局，上下固定，中间自适应

1、上下两部分固定定位、中间绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #top, #bottom{
            height: 100px;
            background: #ff0000;
            position: fixed;
            width: 100%;
        }
        #top{
            top: 0;
        }
        #bottom{
            bottom: 0;
        }
        #center{
            background: #cccccc;
            position: absolute;
            top: 100px;
            bottom: 100px;
            left: 0;
            right: 0;
            overflow: scroll;   滚动条
        }
    </style>
</head>
<body>
    <div id="top">top</div>
    <div id="center">
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
    </div>
    <div id="bottom">bottom</div>
</body>
</html>

2、弹性盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body, html, #main{
            height: 100%;
        }
        #top, #bottom{
            height: 100px;
            background: #ff0000;
        }

        #center{
            background: #cccccc;
            flex-grow: 1;
            overflow: scroll;
        }
        #main{
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="top">top</div>
        <div id="center">
             center
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
             center<br>
        </div>
        <div id="bottom">bottom</div>
    </div>
</body>
</html>