css布局-双飞翼布局

<div class="header">Header</div>
<div class="bd">
    <div class="main">
        <div class="inner">
            Main
        </div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right
    </div>
</div>
<div class="footer">Footer</div>

body{padding:0;margin:0}.header,.footer{width:100%;background:#666;height:30px;clear:both;}.left{background:#E79F6D;width:150px;float:left;margin-left:-100%;}.main{background:#D6D6D6;width:100%;float:left;}.right{background:#77BBDD;width:190px;float:left;margin-left:-190px;}.inner{margin-left:150px;margin-right:190px;}

增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是双飞翼布局。

DOM结构：main内层增加了一个div

时间： 2024-08-08 22:04:37

css布局-双飞翼布局的相关文章

div+css实现双飞翼布局

本例通过div+css实现HTML金典布局双飞翼布局,该布局结构为上中下结构,上:header头:下:footer尾:中:内容,将内容分为了三个结构,左中右下图是效果图我们来看下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="

按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中间自适应,container部分高度保持一致. DEMO 稍微说明一下: html代码中 middle部分首先要放在container的最前部分.然后是left,right 1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到) 2.mid

css的双飞翼布局

双飞翼布局的大概意思就是左右两边的内容是固定的,大小是固定的, 而中间的布局的随着页面的大小变化而自动变化的. 通过代码来解析: 1.四个div,也可以使用section,其中main,left.right为同一级的元素,inner为main的子元素. 2.main,left,right均左浮动. 3.main的宽度为100%,即占满这个页面. 4.设置left的margin-left:-100%;既让left与main在同水平线上,处在最左边. 5.设置right的margin-left:-2

HTML特殊布局--------双飞翼布局

今天看到以前写的一篇布局的例子分享给大家,双飞翼布局. 什么是双飞翼布局?? 1.三列布局,中间宽度自适应,两边固定宽度; 2.中间栏在浏览器中优先展示渲染: 双飞翼布局的原理: 中间的盒子定100%的宽 float:left: 两边的盒子都float:left,定固定的宽:左边的个盒子margin-left:-100%; 右边的盒子margin-left:-自身的宽: 以下是例子: <div class="box"/> <div class="main&

圣杯布局/双飞翼布局异同和比较

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯/双飞翼布局</title> <style> /* 圣杯布局 */ /* .container{ padding:0 200px; } .center{ float:left; width:100%; background: red; heigh

网页布局——双飞翼布局

圣杯布局与双飞翼布局的区别: 圣杯布局(两边定宽,中间自适应的另一种实现方式,这两种方式在结构的书写上还是有不一样的),主要是用相对定位与浮动和padding实现. 实现两边定宽,中间自适应,主要是通过浮动与margin实现,代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>双飞翼布局&

CSS实现双飞翼布局的几种方法

HTML代码: <div class="container"> <div class="main"> <div> 这是中间的内容 </div> </div> <div class="left">左侧边栏</div> <div class="right">右侧边栏</div> </div> 第一种(定位法)(m

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

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

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

一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2.2,设置两侧盒子(左.右)的宽度 ,使其宽度固定: 2.3,设置中间盒子的宽度为100%,这是中间盒子宽度自适应的关键: 2.4,设置容器的padding-left和padding-right属性,属性值分别为左盒子的宽度和右盒子的宽度: 2.5,让三个盒子都向左浮动,向右浮动可能会出现问题,所以都