经典布局之圣杯布局 —— 左右定宽,中间流式

<div class="con">
     <div class="main"></div>
     <div class="left"></div>
     <div class="right"></div>
</div>
.con{
    padding-left:200px;//设为.left的宽度
    padding-right:150px;//设为.right的宽度
}
.main{
    width:100%;
    float:left;
}
.left{
    width:200px;
    float:left;
    margin-left:-100%;
    right:200px;
}
.right{
     width:150px;
     float:left;
     margin-left:-150px;
}

需要修改IE6下的bug,margin负值会在IE6下失效

*html .left{
     left:150px;
}
时间: 2024-10-14 00:37:13

经典布局之圣杯布局 —— 左右定宽,中间流式的相关文章

【CSS】 布局之圣杯布局

在看众多大神的css布局指南时,经常看到一个布局:圣杯布局(也有称为双飞翼布局的).今天我们也来剖析一下. 其实,对于众多css布局,我们只要明确理解了3种技术,那么基本上大多数布局都难不倒我们了: 浮动 float 绝对定位和相对定位 negative margin 负边距 relative position 浮动 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.(w3c) 上面是

css布局之圣杯布局

三列布局中,左右两列定宽,中间一列自适应是比较常用的一种布局方式.代表性的布局方式有圣杯布局和双飞翼布局. 圣杯布局 下面这些布局都是通过浮动来实现 的,但常常只将三列布局中,左右两列定宽,中间一列自使用看成是圣杯布局.我认为这种观点其实有点狭隘. 单从圣杯布局这个名字来讲,也不是单指三列布局,圣杯并不是三列布局的形象表示,在西方圣杯是指渴求之物.在网页展现时我们渴求之物当然是主内容区域的信息. 圣杯布局就是:将主内容区域首先加载,其次再加载侧边的内容. 先来理解理解一下圣杯布局是如何实现的:

双飞翼布局以及圣杯布局

双飞翼布局和圣杯布局其实结果是一样的,都是实现三栏布局,中间宽度自适应,两端宽度固定,只是实现的方法不一样 圣杯布局 三栏是独立的,利用外层container的padding 以及 两端的margin以及定位left,right值实现 <!-- HTML --> <div class="container"> <div class="middle">我是位于中间</div> <div class="le

CSS网页布局基础-圣杯布局和双飞翼布局

行布局 多列布局 圣杯布局 双飞翼布局 一.行布局 行布局垂直水平居中 注:这里没有用margin: 0 auto;先让它水平居中,而是使用了绝对定位布局,然后设置top:50%; left:50%;但是光设置这个还不够,因为这并不是水平垂直居中,因为它并没有考虑自身的宽度和高度,所以这里根据盒子本身的高宽又再此基础上设置了margin-left和margin-top.如果只设置了top:50%; left:50%;而没有设置margin-left和margin-top,效果如下: 代码如下:

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

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

CSS基础布局--居中对齐,左侧定宽右侧自适应

CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一些方法.如果你有更多关于布局方面的技巧,欢迎留言交流. 一.神奇的居中 经常看到有一些面试题问如何实现水平垂直居中,还要求用多种方法.唉唉唉!下面介绍一下我所知道的实现居中的方法. (1)父元素relative;子元素absolute,top:50%;left:50%;margin-left:-自己

NEC学习 ---- 布局 -两列, 左侧定宽,右侧自适应

CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;

负边距、三栏布局(圣杯布局、双飞翼布局)

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

双飞翼布局和圣杯布局的对比

先回顾一下 圣杯布局的实现过程>> 在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的,而且宽度控制要改的地方也多,那么有没其他方法更加简洁方便呢? 在淘宝UED探讨下,增加多一个div就可以不用相对布局了,只用到了浮动和负边距,这就是我们所说的双飞翼布局. DOM结构:main内层增加了一个div <div class="header">Header</div> <div class="bd

双飞翼布局和圣杯布局解析

今天突然想起了温习一下css布局.之前看双飞翼布局只是粗略的看了一下,大概明白怎么做,但是并没有去延伸一下...还有它的孪生兄弟:圣杯布局.今天仔细的琢磨了一下:突然发现其实内容还不少的样子. 双飞翼布局或者说圣杯布局它们都是三列布局:(一列自适应和两列固定列).当然,除了三列布局,还有一列布局(自适应居中).两列布局(一列自适应一列固定列). 其他两种都相对来说简单些.就着重说一下三列布局. 一.双飞翼布局            先给出效果图:                 其中中间一部分是