div的布局

最新推荐文章于 2025-06-28 13:58:07 发布

前端黑

最新推荐文章于 2025-06-28 13:58:07 发布

阅读量3.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：平时的碎片

本文链接：https://blog.csdn.net/qq_38964133/article/details/96017946

平时的碎片专栏收录该内容

10 篇文章

订阅专栏

本文介绍多种网页布局方法，包括左右固定宽度自适应布局、中间自适应布局及垂直居中等，并探讨了不同布局方式如圣杯布局和双飞翼布局的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

左边固定宽度右边自适应布局两栏自适应

左侧浮动右侧使用margin-left

<!--左边固定宽度 右边自适应布局  两栏自适应布局 -->
<!DOCTYPE html>
<html>

<head>
    <title>自适应布局</title>
    <style>
    .container {
        overflow: hidden;
        border: 1px solid red;
    }
    
    .left {
        float: left;
        width: 200px;
        height: 150px;
        background: green;
    }
    
    .right {
        margin-left: 200px;
        height: 150px;
        background: pink;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">固定的区域</div>
        <div class="right">自适应区域</div>
    </div>
</body>

</html>

注意父元素要使用overflow: hidden

第二种使用双float和calc进行布局

css的代码如下

.outer {
        overflow: hidden;
        border: 1px solid red;
    }
    
    .left {
        float: left;
        width: 200px;
        background: pink;
        height: 150px;
    }
    
    .right {
        float: left;
        width: calc(100%-200px);
        height: 100px;
        background: green;
    }

左右两边宽度100 中间自适应布局

第一种解法使用浮动和margin

需要注意的是将middle写在最后面这个可以保证元素在同一行

左右两侧使用浮动中间使用margin 就可以

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .outer {}
    
    .left,
    .right {
        width: 100px;
        height: 100px;
    }
    
    .left {
        float: left;
        background: pink;
    }
    
    .right {
        float: right;
        background: green;
    }
    
    .middle {
        height: 100px;
        background: red;
        margin: 0 100px;
    }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left">固定区</div>
        <div class="right">固定区</div>
        <div class="middle">自适应区</div>
    </div>

元素垂直居中

 .outer {
        margin: auto;
        width: 500px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }
    这种方式的垂直居中  不适合在页面上有另一个相邻的页面页进行定位垂直  
    两者会互相影响的   会有意想不到的布局  情况

第二种元素垂直居中

.outer {
        height: 100px;
        width: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
 }
 这种不适合在有自适应宽高的布局中进行使用

第三种垂直居中

.outer {
        width: 200px;
        height: 200px;
        background: green;
        position: absolute;
        left: 50%;
        /*定位父级的50% */
        top: 50%;
        transform: translate(-50%, -50%);
        /*自己的50% */
    }
    这种在ie8中不支持

弹性布局找一下为什么失效了

        height: 300px;
        -webkit-display: flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        border: 1px solid #ccc;

第二种解法两边绝对定位中间使用margin

    .left,
    .right {
        width: 100px;
        height: 100px;
    }
    
    .left {
        position: absolute;
        left: 0;
        top: 0;
        background: green;
    }
    
    .right {
        position: absolute;
        right: 0;
        top: 0;
        background: pink;
    }
    
    .middle {
        height: 100px;
        background: red;
        margin: 0 100px;
    }

第三种解法圣杯布局

利用的是三个div进行浮动利用margin-left的负值进行相关的移动

<!DOCTYPE html>
<html>

<head>
    <title>圣杯布局</title>
    <style>
    .container {
        height: 200px;
        background: #666;
    }
    
    .center {
        box-sizing: border-box;
        /*这只padding是为了防止内容过多  内容被两边的盒子压住*/
        padding: 0 210px;
        float: left;
        width: 100%;
        height: 200px;
        background: red;
    }
    
    .left {
        height: 200px;
        width: 200px;
        float: left;
        background: pink;
        margin-left: -100%;
    }
    
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background: yellow;
        margin-left: -200px;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="center">中间</div>
        <div class="left">固定区域</div>
        <div class="right">固定区域</div>
    </div>
</body>

</html>

第四种解法弹性布局的两栏自适应

.wrap {
        display: flex;
        width: 100%;
        height: 100%;
    }
    
    .left,
    .right {
        width: 200px;
        height: 200px;
        background: blue;
    }
    
    .center {
        flex: 1;
        height: 200px;
        background: red;
    }
    
 <div class="wrap">
        <div class="left">固定区域</div>
        <div class="center">自适应区域</div>
        <div class="right">固定区域</div>
 </div>

####双飞翼布局第五种

和圣杯布局的区别在于中间栏div内容不被遮挡”问题的思路不一样。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>双飞翼布局</title>
    <style>
    .container {
        overflow: hidden;
    }
    .center,
    .left,
    .right {
        float: left;
        height: 200px;
    }
    .left {
        margin-left: -100%;
        background: pink;
        width: 200px;
        height: 200px;
    }  
    .right {
        margin-left: -200px;
        width: 200px;
        height: 200px;
        background: red;
    }   
    .content {
        margin: 0 220px;
    } 
    .center {
        width: 100%;
        background: yellow;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="center">
            <div class="content">中间内容</div>
        </div>
        <div class="left">固定区域</div>
        <div class="right">固定区域</div>
    </div>
</body>
</html>