我的圣杯布局

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
height:100%;
}
*{margin: 0; padding: 0;}
.content{width: 100%;height:100%;}
.wrapper{
position: relative;
z-index: 20;
width:100%;
height:100%;
}
.left-bd{float: left;width: 200px;height:100%;background: blue; }
.right-bd{float:right;width:300px;height:100%; background: green;;}
.main{position:relative;margin-left:200px;margin-right: 300px;z-index:30;top:-100%;height:100%;background: red;}
</style>

</head>
<body>
<div class="content">
<div class="wrapper">
<div class="left-bd">left content</div>
<div class="right-bd">right content</div>
</div>
<div class="main">main content</div>
</div>
</body>
</html>

我的圣杯布局

时间： 2024-10-08 16:57:23

我的圣杯布局的相关文章

圣杯布局

圣杯布局是一种三列布局,两边定宽,中间自适应: 圣杯布局的原理就是当子元素处于浮动状态时,设置负margin,子元素会叠盖到兄弟元素之上. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>圣杯布局&

负边距实现圣杯布局以及列等高

圣杯布局如下图所示, 图一 两边的内容宽度固定,中间栏宽度自适应.html代码如下, <div class="container"> <div class='main'> <p>main</p> <p>主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干

圣杯布局和双飞翼布局的理解和区别

圣杯布局和双飞翼布局基本上是一致的,都是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染.解决方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的内容不被遮挡上,圣杯布局是中间栏在添加相对定位,并配合left和right属性,效果上表现为三栏是单独分开的(如果可以看到空隙的话),而双飞翼布局是在中间栏的div中嵌套一个div,内容写在嵌套的div里,然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在

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

圣杯布局和双飞翼布局 今天看了很多圣杯布局和双飞翼布局的技术博客,通过自己的理解总结一下吧. 1.二者相同点: 实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果是一样的. 2.不同点: 圣杯布局知识点:浮动,负边距,相对定位,不需要添加额外标签. 双飞翼:只用到浮动,负边距,不需要使用相对定位,需要添加一个额外的标签. 注意:html结构中中间部分要写在左右布局之前,为了优先渲染. 下面就先来看一下圣杯布局的实现过程吧: 先写出基本DOM结构:

圣杯布局的实现过程

圣杯布局和双飞翼布局,他们的都要求三列布局,中间宽度自适应,两边定宽,这样做的优势是重要的东西放在文档流前面可以优先渲染,而双飞翼布局是对圣杯布局的一种改良,下一篇文章会讲到. 圣杯布局:用到浮动.负边距.相对定位,不添加额外标签 DOM结构: <div class="header">Header</div> <div class="bd"> <div class="main">Main</d

圣杯布局方法实例

<!doctype> <html>   <head>     <title>圣杯布局</title>     <style>    body,div{margin: 0;padding: 0;}        .main {         background:red;        width:100%;    float:left;    }        .left {            background:yellow

css的圣杯布局

圣杯布局和双飞翼布局实现的效果是一样的. 代码解析: 1.四个section,container,main,left,right.其中那个container为父容器. 2.main,left,right均左浮动. 3.main的宽度为100%. 4.设置left的margin:-100%. 5.设置rightd margin:-200px; 6.设置父容器的内边距padding:0px 200px 0px 200px. 7.设置left的positon:relative;left:-200px.

CSS布局-圣杯布局

圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, .lzcrg {margin:10px 0; min-width:400px;text-align: center;color:#ffffff; } .left {background-color: #4DBCB0; padding:20px 0;} .aside, .center, .right {

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局基本上是一致的,都是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染.解决方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的内容不被遮挡上,圣杯布局是中间栏在添加相对定位,并配合left和right属性,效果上表现为三栏是单独分开的(如果可以看到空隙的话),而双飞翼布局是在中间栏的div中嵌套一个div,内容写在嵌套的div里,然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在

负边距、三栏布局（圣杯布局、双飞翼布局）

首先来了解下 一.负边距在让元素产生偏移时和position: relative有什么区别? position:relative产生偏移时,他原来的位置不会脱离文档流的,即还占用原来的空间,但负边距产生偏移时它原来的位置并不占用空间: 例如下面的代码 Document *{ margin: 0px; padding: 0px; } .up,.down,.middle{ background-color: red; height: 100px; width: 100px; } .negative-