html 布局（三列自适应布局、圣杯布局、双飞翼布局）

最新推荐文章于 2023-11-03 20:20:04 发布

一蓑烟雨..

最新推荐文章于 2023-11-03 20:20:04 发布

阅读量302

点赞数

分类专栏： html\css 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44713688/article/details/107465641

版权

html\css 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

圣杯布局

    <title>圣杯布局</title>

    <style>

        body{
            min-width: 800px;
        }
        
        *{
            padding: 0;
            margin: 0;
        }

        .header{
            height: 60px;
            background-color:#FFCFDF;
        }

        .parent {
            /* box-sizing: border-box; */
            background-color:#fefdca;
            height: 500px;
            padding: 0 215px 0 115px;  /*为了使#center摆正,左右padding分别等于左右盒子的宽,可以结合左右盒子相对定位的left调整间距*/
        }

        .left {
            margin-left: -100%;  
            position: relative;
            left: -115px;  
            float: left;
            width: 100px;
            height: 500px;
            background-color: #a5dee5;
            opacity: 0.5;
        }

        .center {
            float: left;
            width: 100%;  /*由于#parent的padding,达到自适应的目的*/
            height: 500px;
            box-sizing: border-box;
            /* border: 1px solid #000; */
            background-color: #7fdbda;
        }

        .right {
            position: relative;
            left: 215px;
            width: 200px;
            height: 500px;
            margin-left: -200px;  /*使#right上去一行*/
            float: left;
            background-color: #fa26a0;
            opacity: 0.5
        } 

        /* .footer{
            height: 60px;
            clear: both;
            background-color:blueviolet;
        } */
    </style>



<body>
    
    <header class="header"></header>

    <div class="parent">
        <!--#center需要放在前面-->
         <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

    <!-- <footer class="footer"></footer> -->
</body>
</html>

双飞翼布局

<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
    
    <style>

        .header {
            height: 60px;
            background-color:cyan;
        }
        
        .center {
            height: 500px;
            float: left;
            width: 100%;
            background-color: blueviolet;
        }
        .center_inbox{
            height: 480px;
            border: 1px solid #000;
            margin: 0 220px 0 120px;  
        }
        
        .left {
            float: left;
            width: 100px;
            height: 500px;
            margin-left: -100%; 
            background-color:pink;
            opacity: 0.5;
        }
        
        .right {
            float: left;
            width: 200px;
            height: 500px;
            margin-left: -200px;  
            background-color:deepskyblue;
            opacity: 0.5;
        }
        .footer {
            clear: both;  
            height: 60px;
            background-color: #ccc;
        }
        
        </style>



<body>
    <div class="header"></div>
    
    <div class="center">
        <div class="center_inbox">中间自适应</div>
    </div>
    <div class="left">左列定宽</div>
    <div class="right">右列定宽</div>

<div class="footer"></div>
</body>
</html>

三列自适应布局

<body>
    <div class="header"></div>
    
        <div class="center">
            <div class="center_inbox">中间自适应</div>
        </div>
        <div class="left">左列定宽</div>
        <div class="right">右列定宽</div>
    
    <div class="footer"></div>
</body>
    
<style>

.header {
    height: 60px;
    background-color: #ccc;
}

.center {
    height: 500px;
    float: left;
    width: 100%;
    background-color: #eeff2b;
}
.center_inbox{
    height: 480px;
    border: 1px solid #000;
    margin: 0 220px 0 120px;  /*关键!!!左右边界等于左右盒子的宽度,多出来的为盒子间隔*/
}

.left {
    float: left;
    width: 100px;
    height: 500px;
    margin-left: -100%; /*调整#left的位置,值等于自身宽度*/
    background-color: #f00;
    opacity: 0.5;
}

.right {
    float: left;
    width: 200px;
    height: 500px;
    margin-left: -200px;  /*使right到指定的位置,值等于自身宽度*/
    background-color: #0f0;
    opacity: 0.5;
}
.footer {
    clear: both;  /*注意清除浮动!!*/
    height: 60px;
    background-color: #ccc;
}

</style>

一蓑烟雨..

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 布局（三列自适应布局、圣杯布局、双飞翼布局）

圣杯布局 <title>圣杯布局</title> <style> body{ min-width: 800px; } *{ padding: 0; margin: 0; } .header{ height: 60px; backgrou
复制链接

扫一扫