开发者社区> 振礼硕晨> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS圣杯布局和双飞翼布局

简介: 一、圣杯布局 圣杯布局简介: 圣杯布局将页面分为 左 中 右 三部分,中间部分的宽度可以随着浏览器宽度的变化而变化,左右两边部分定宽,不会变化。 圣杯布局实现起来很简单,主要是用到了 float、position、margin-left 等属性。
+关注继续查看

一、圣杯布局

  • 圣杯布局简介:
  1. 圣杯布局将页面分为 左 中 右 三部分,中间部分的宽度可以随着浏览器宽度的变化而变化,左右两边部分定宽,不会变化。

  2. 圣杯布局实现起来很简单,主要是用到了 float、position、margin-left 等属性。

img_72eab4462951cad04cdc619ef193f70c.png
  • 圣杯布局HTML代码:
<div id="content">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
  • 圣杯布局CSS代码:
#content{
    background-color: #fff;
    height: 60px;
    padding: 0 190px 0 150px;
}
.left{
    width: 150px;
    height: 100%;
    background-color: red;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -150px;
}
.middle{
    width: 100%;
    height: 100%;
    background-color: green;
    float: left;
}
.right{
    width: 190px;
    height: 100%;
    background-color: yellow;
    float: left;
    margin-left: -190px;
    position: relative;
    right: -190px;
}

一、双飞翼布局

  • 双飞翼布局简介:
  1. 双飞翼布局和圣杯布局很相似,但是在实现上有略微的差别。圣杯布局采用父元素的padding设置中间元素不被遮挡;双飞翼布局采用子元素的margin设置中间元素不被遮挡。

  2. 双飞翼布局的特点:中间栏中的内容可以有点渲染出来。

img_ce41d73e5527956a766f3a773ad90809.png
  • 双飞翼布局HTML代码:
<div class="content">
    <div class="middle">
        <div class="middle-content">middle-content</div>
    </div>
    
    <div class="left">left</div>
    
    <div class="right">right</div>
</div>
  • 双飞翼布局CSS代码:
.content{
    width: 100%;
    height: 56px;
    background-color: #333333;
}
.middle{
    width: 100%;
    height: 100%;
    float: left;
    background-color: #333;
}
.left{
    width: 200px;
    height: 100%;
    float: left;
    background-color: yellow;
    margin-left: -100%;
}
.right{
    width: 150px;
    height: 100%;
    float: left;
    background-color: red;
    margin-left: -150px;
}
.middle .middle-content{
    /*width: 100%;        注意这里不要设置width: 100%,否则右边会溢出,排版混乱*/
    height: 100%;
    background-color: green;
    margin: 0 150px 0 200px;
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
CSS布局快速入门
最近因为项目需要,不得不重新看看CSS/HTML之类的东西,不看不要紧,一看吓一跳 原来不知道真的是太多,以前从未认真对待过,这次总结了一下学习所得,算是对自己 有个交代,也可能让想了解CSS/HTML布局应用的朋友快速入门: 1. CSS 与HTML元素直接关联,以HTML h1元素为例。
772 0
HTML之使用CSS旋转图片
HTML之使用CSS旋转图片
17 0
HTML&CSS 3|学习笔记
快速学习HTML&CSS 3
30 0
HTML&CSS 2|学习笔记
快速学习HTML&CSS 2
14 0
HTML&CSS 1|学习笔记
快速学习HTML&CSS 1
37 0
HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果
17 0
HTML+CSS实战操作旋转魔方
今天以纯HTML和CSS实现3D旋转魔方,可以搭建服务器上
55 0
+关注
振礼硕晨
爱学习,爱设计
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
Java开发手册-孤尽秘传版
立即下载
低代码开发师(初级)实战教程
立即下载