圣杯布局与双飞翼布局

圣杯布局

实现原理

html代码中,middle部分首先要放在container的最前部分,然后是left,right

  1. 将三者都设置 float:left, position:relative (因为相对定位后面会用到)
  2. middle设置 width:100% 占满一行
  3. 此时middle占满一行,所以要把left拉到middle所在行的最左边,使用 margin-left:-100%
  4. 这时left拉回到middle所在行的最左边,但会覆盖middle内容的左端,要把middle内容拉出来,所以在外围container加上 padding:0 210px
  5. middle内容拉出来了,但left也跟着出来了,所以要还原,就对left使用相对定位 left:-210px
  6. 同理,right要拉到middle所在行的最右边,使用 margin-left:-210pxright:-210px

实现代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            text-align: center;;
        }
        #demo {
            margin: auto;
        }
        #header, #footer {
            height: 50px;
            background-color: #aaa;
        }
        #container {
            overflow: hidden;
            margin: 10px 0;
            padding:0 210px;
        }
        #left {
            background-color: red;
            float:left;
            position:relative;
            left:-210px;
            width:200px;
            margin-left:-100%;
        }
        #right {
            background-color: green;
            width: 200px;
            margin-left: -200px;
            float: left;
            right: -210px;
            position: relative;
        }
        #middle {
            background-color: blue;
            float:left;
            width:100%;
        }
    </style>
</head>
<body>
    <div id="demo">
        <header id="header">头部</header>
        <div id="container">
            <div id="middle">
                middle<br>主内容区域
            </div>
            <div id="left">
                left<br>左侧边栏区域
            </div>
            <div id="right">
                right<br>右侧边栏区域
            </div>
        </div>
        <footer id="footer">底部</footer>
    </div>
</body>
</html>

双飞翼布局

实现原理

html代码中,middle部分首先要放在container的最前部分,然后是left,right

  1. 将三者都设置 float:left
  2. middle设置 width:100% 占满一行
  3. 此时middle占满一行,所以要把left拉到middle所在行的最左边,使用 margin-left:-100%,同理right使用 margin-left:-200px
  4. 此时middle的内容被覆盖,要把middle的内容拉出来,除了使用外围container的padding,还可以考虑使用margin,给middle增加一个内层div -- middle_content, 然后设置 margin:0 210px

实现代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style type="text/css">
        body {
            text-align: center;;
        }
        #header, #footer {
            height: 50px;
            background-color: #aaa;
        }
        #container {
            overflow: hidden;
            margin: 10px 0;
        }
        #left {
            background-color: red;
            float:left;
            width:200px;
            margin-left: -100%;
        }
        #right {
            background-color: green;
            width: 200px;
            float: left;
            margin-left: -200px;
        }
        #middle {
            float: left;
            width: 100%;
        }
        #middle_content {
            background-color: blue;
            margin: 0 210px;
        }
    </style>
</head>
<body>
    <div id="demo">
        <header id="header">头部</header>
        <div id="container">
            <div id="middle">
                <div id="middle_content">
                    middle_content<br>主内容区域
                </div>
            </div>
            <div id="left">
                left<br>左侧边栏区域
            </div>
            <div id="right">
                right<br>右侧边栏区域
            </div>
        </div>
        <footer id="footer">底部</footer>
    </div>
</body>
</html>

原文发布于微信公众号 - 前端布道(FontendPreach)

原文发表时间:2018-04-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小筱月

jQuery 事件绑定 和 JavaScript 原生事件绑定

jQuery 中提供了四种事件监听绑定方式,分别是 bind、live、delegate、on,

26320
来自专栏HTML5学堂

关于行、块元素的讲解以及HTML5元素的分类

继上周我们讲解了所有常用的CSS选择器以及CSS选择器的优先级。到目前为止,你是不是觉得静态页面布局简单了很多,而不是单单使用类名选择器(虽然很好用)来操作了。...

50870
来自专栏一“技”之长

Java开发GUI之单复选框 原

    单复选框在处理一些用户选项时十分方便。在Java的GUI体系中,复选框使用Checkbox类来创建,单选框实际上是将多个复选框结合成为组,同一组的复选框...

9220
来自专栏流媒体

Android View measure解读

15730
来自专栏cnblogs

Bootstrap源码分析之transition、affix

一、Transition(过滤) 作为一个基础支持的组件,被其他组件多次引用。实现根据浏览器支持transition的能力,然后绑定动画的结束事件; 首先:创建...

21970
来自专栏移动开发的那些事儿

自定义实现垂直滚动的TextView

通过控制y参数可实现文字不同的垂直距离,这里的x,y并不代表默认横向坐标为0,纵向坐标为0的坐标,具体详解我觉得这篇博客解释的比较清楚,我们主要关注的是参数y的...

17620
来自专栏IT 指南者专栏

前端系列之CSS基础知识概述

1、什么是DIV (1)、div就是html一个普通标签,进行区域划分。div特性:独自占一行。独自不能实现复杂效果。必须结合css样式进行渲染。 (2)、d...

397110
来自专栏python3

tkinter -- button1

Tkinter Relief styles: 构件的浮雕式是指某些模拟的3-D周围的部件外的影响

13940
来自专栏我分享我快乐

WEB布局代码初学者常见问题整理

1、 单词写错 ? ? 2、 用中文符号 ? ? 3、 标签未结束 ? ? 4、 引号未结束 ? ? 5、 尖括号未结束 ? ? 6、 标签属性之间...

32860
来自专栏IMWeb前端团队

导航菜单优化制作

以前制作导航菜单,总要加许多id在HTML中,js代码也要将id挨个加上去,今日终于习得破解之法,不在用以前那种笨拙的方法了。 ? 以下是HTML代码: <bo...

32670

扫码关注云+社区

领取腾讯云代金券