HTML+CSS实现圣杯布局!

实现圣杯布局有2中方法:

1、flex布局:(推荐)

爸爸直接上代码:

    <h4>header</h4>
</header>
<section>
    <div class="left">
        <h4>left</h4>
    </div>
    <div class="middle">
        <h4>middle</h4>
    </div>
    <div class="right">
        <h4>right</h4>
    </div>
</section>
<footer>
    <h4>footer</h4>
</footer>

下面是CSS代码:

html, body{ padding: 0; margin: 0;  text-align: center;}
header, footer{ border: 1px solid #333; background: #ccc;}
section{    display: flex;}
.left{  width: 200px;   background: red;}
.middle{    flex: 1;    background: green;}
.right{ width: 200px;   background: blue;}

2、浮动非主流(float)

HTML代码:需要把middle放在最前面


<header>
    <h4>header</h4>
</header>
<section>
    <div class="middle">
        <h4>middle</h4>
    </div>
    <div class="left">
        <h4>left</h4>
    </div>
    <div class="right">
        <h4>right</h4>
    </div>
</section>
<footer>
    <h4>footer</h4>
</footer>

上样式:


html, body{
    padding: 0;
    margin: 0;
    text-align: center;
}
header, footer{
    border: 1px solid #333333;
    background: #CCCCCC;
}
footer{
    clear: both;
}
section{
    /* 给left和right空出位置 */
    padding: 0 200px 0 200px;
    overflow: hidden;
}
.left, .middle, .right{
    position: relative;
    float: left;
}
.middle{
    width: 100%;
    background: green;
}
.left{
    /* 让left回到上一行最左侧 */
    margin-left: -100%;
    /* 让left回到最左侧 */
    left: -200px;
    width: 200px;
    background: red;
}
.right{
    margin-left: -200px;
    right: -200px;
    width: 200px;
    background: blue;
}

下面是效果图,效果是一样的!


11221190629.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,841评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,859评论 1 45
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,350评论 0 11
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,238评论 3 30
  • 前段时间,刚上大学不久的小表妹突然跑来找我,让我给她推荐几款好用且性价比高的化妆产品。于是乎顺手列了张清单,分享给...
    我是木木乔阅读 830评论 0 13