likes
comments
collection
share

HTML5中三栏布局的多种写法

作者站长头像
站长
· 阅读数 25

前言

HTML5中三栏布局的多种写法

在很多网页中，是不是布局也是这样的，两边是导航栏或广子，中间是页面的主体。

这种布局就是所谓的三栏布局

三栏布局的实现

一.圣杯布局

相对定位方法

body部分

<body>
    <div class="page">
        <div class="content">主要内容</div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>

css样式部分

初始化页面内外边距，给广告位和主要内容添加box

  *{
       margin: 0;
       padding: 0;
   }
   .page{
       height: 200px;
   }
   .left,.right{
       height: 200px;
       width: 200px;
       background: pink;
   }
   .content{
       height: 200px;
       background: bisque;
   }

HTML5中三栏布局的多种写法

把页面的左右两边给广告位留出200px的宽度，当然你也可以自己设定

.page{
            padding: 0 200px;
        }

HTML5中三栏布局的多种写法

这个时候，就应该把下面两个广告位的box分别放在左右两边，在圣杯布局当中，这一步是将整个div用设置float，然后让左广告位的box与右边距200px，再用相对定位把box移到最左边

.content{
            height: 200px;
            background: bisque;
        }
        .page div{
            float: left;
        }
        .content{
            width: 100%;
        }
        .left{
            margin-left: -200px;
            position: relative;
            left: -100%;
        }

HTML5中三栏布局的多种写法 最后把右边的广告位移到右边

.right{
            margin-right: -200px;
        }

HTML5中三栏布局的多种写法

圣杯布局的特点就是先用padding把左右留出位置，再用relative相对定位方法移动box。

二.双飞翼布局

浮动方法

html部分

重点： html中，在content中再加一个div放主要内容

<div class="page">
        <div class="content">
            <div class="inner">主要内容</div>
        </div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>

样式

基本样式不变

*{
            margin: 0;
            padding: 0;
        }
        .page{
            height: 200px;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background: pink;
        }
        .content{
            height: 200px;
            background: bisque;
            width: 100%;
        }

HTML5中三栏布局的多种写法

接下来就是inner的操作 ，给margin一下，不动content

.inner{
            margin: 0 200px;
            height: 100%;
        }

HTML5中三栏布局的多种写法

再利用浮动来把左右放好

.page > div{
            float: left;
        }
.left{
      margin-left: -100%;
        }
.right{
      margin-left: -200px;
        }

HTML5中三栏布局的多种写法

和圣杯布局相比，理解起来更简单，代码需求更少

三.弹性布局

html

<div class="page">
        <div class="content">主要内容</div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
</div>

css

设置浮动

*{
    margin: 0;
    padding: 0;
}
.page{
    height: 200px;
}
.left,.right{
    height: 200px;
    width: 200px;
    background: pink;
}
.content{
    height: 200px;
    background: bisque;
}
.page{
    display: flex;
}

HTML5中三栏布局的多种写法

接下来的操作肯定会让你爽到，因为我写的时候也感觉非常舒服

这里的flex和order在css中默认为0，flex是设定是否占满页面，由于上面的box没有设置宽度，所以设置为1时，就会自动填满广告位剩下的空间，而order则是设置浮动的优先级，因为在body中，我们设置的是content最前，所以让content排序第二，right拍第三，left的order默认为0，排第一

.content{
            flex:1;
            order: 1;
        }
        .right{
            order: 2;
        }

这是不设order值 HTML5中三栏布局的多种写法

这是设立order值 HTML5中三栏布局的多种写法

由于设置的是浮动，所以可以适配各种屏幕大小

四.table布局

html

注意这里的content放在了中间的位置

<div class="page">
        <div class="left">广告位</div>
        <div class="content">主要内容</div>
        <div class="right">广告位</div>
    </div>

css

*{
            margin: 0;
            padding: 0;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background: pink;
        }
        .content{
            height: 200px;
            background: bisque;
            width: 100%;
        }

这个看起来有点小奇怪，但是不慌，开始使用table来操作 HTML5中三栏布局的多种写法

给page设置属性为table

.page{
            height: 200px;
            width: 100%;
            display: table;
            table-layout: fixed;
        }

.page > div{
            display: table-cell;
        }

突然就变成这样了，这是当一个元素的display属性设置为table-cell时，该元素就会遵循表格布局的规则，并且单元格可以自动调整宽度以适应其内容或表格的整体宽度。 HTML5中三栏布局的多种写法

但是缺点就是主要内容无法优先加载

五.网格布局

html

<div class="page">
        <div class="left">广告位</div>
        <div class="content">主要内容</div>
        <div class="right">广告位</div>
    </div>

css

前面也一样

*{
            margin: 0;
            padding: 0;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background: pink;
        }
        .content{
            height: 200px;
            background: bisque;
        }

关键在这里

.page{
            display: grid;
            grid-template-columns: 200px auto 200px;
        }

display: grid;: 这一行指定了元素应该采用网格布局（Grid Layout）。Grid布局是CSS中一种先进的二维布局系统，允许开发者在容器里创建行和列的网格结构，以便更高效地安排和对齐内容。

grid-template-columns: 200px auto 200px;: 这部分设置了网格容器中列的宽度。具体来说，它定义了三列的宽度 中间的auto值则是自动调整 HTML5中三栏布局的多种写法

网格布局主要缺点也是主要内容无法优先加载

还有第六种地位布局

这一种就是用绝对定位来解决 自然都会写

结语

三栏布局是运用非常广泛的页面布局方法，相信这可以给小白一点帮助，求赞求赞！

转载自:https://juejin.cn/post/7383201955388424242
评论
请登录