css布局:圣杯布局

原创 2016年08月29日 14:10:30

圣杯布局:左右两边固定宽度,中间不设置宽度(自适应页面宽度)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        *{ margin:0;padding: 0;}

        .center{height:500px;background: red; margin: 0 200px;}
        .left{ width:200px;height:500px;background: yellow;position:absolute;left: 0;top:0;}
        .right{ width:200px;height:500px;background: yellowgreen;position:absolute;right: 0;top:0;}

    </style>

</head>
<body>

<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

效果如图所示

版权声明:谁没个菜的时候!

css中圣杯布局

圣杯布局就是左右两边的图片保持不变,中间的搜索框因浏览器的大小改变而改变,典型案例的如天猫页面搜索框,如图 首先我们设置一个父盒子包含三个小盒子 并给父盒子...

Css有关于圣杯及双飞翼布局

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。 说道margin负值问题就不得不说一下前端页面常见的布局:圣杯和双飞翼布局。其实这两...

CSS 圣杯布局和双飞翼布局

今天在网上看到圣杯布局和双飞翼这两种布局说法, 去查了一下,把心得整理一下。 这两个布局是应用在三栏布局上的(当然也可以改成多栏),三栏布局实现有很多方法,但是一般而言我们是这样写的: ...

CSS之圣杯布局和双飞翼布局

圣杯布局的构造过程: 三者都设置向左浮动。 设置middle宽度为100%。 设置负边距,.left设置负左边距为100%...

CSS 圣杯布局 双飞翼布局

两种其实是一样的布局。特点:中间的内容可以根据屏幕的大小的改变而改变,左右两边的内容保持不变  圣杯布局(了解) 目的:加载文档时先加载中间区域,再加载左右两边。 特点:中间的内容可以根据...

圣杯布局------4种css左中右布局方式

1. float+margin Title #content{ height:300px; } ...

CSS中的圣杯布局与双飞翼布局

圣杯布局和双飞翼布局也是实现二&三列布局的有效方式,我将在本文中记录它们的原理和实现。圣杯布局原理:圣杯布局在所有列的最外层增加了一个含有padding的wrapper,通过定位,负边距将两个侧边栏移...
  • jlu16
  • jlu16
  • 2017年10月31日 10:48
  • 48

css中圣杯布局&双飞翼布局(以及css2零碎知识点)

css中的两种布局(圣杯布局和双飞翼布局)

CSS布局之什么是圣杯布局与双飞翼布局

圣杯布局与双飞翼布局 在面试时,你会经常遇到那么一个考题,有left、right、container三个盒子,要求left与right盒子宽度固定,分别固定于浏览器两侧,container位于中间,...

CSS布局 -- 圣杯布局 & 双飞翼布局

CSS布局 -- 圣杯布局 & 双飞翼布局 按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。 但在这里实现起来还是有一些区别的   【圣杯布局】 在这里...
  • ssisse
  • ssisse
  • 2016年05月12日 08:58
  • 216
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css布局:圣杯布局
举报原因:
原因补充:

(最多只允许输入30个字)