圣杯和双飞翼布局

181 阅读2分钟

圣杯和双飞翼布局

圣杯布局

一、目的

  1. 两侧内容宽度固定,中间内容宽度自适应
  2. 三栏布局中间一栏优先加载和渲染

二、实现方法

float + margin

圣杯布局

(1) 初始化html文件

<div id="header">Header</div>
<div id="content">
  <div id="center" class="column">Center</div>
  <div id="left" class="column">Left</div>
  <div id="right" class="column">Right</div>
</div>
<div id="footer">Footer</div>

content设置宽度100%

#content #center {
    width: 100%;
}

footer设置消除浮动

#footer {
  clear: both;
}

(2) 添加float属性

left, center, right添加float属性

#content .column {
    float: left;
}

(3) 给content设置左右padding

左右padding的值等于左右栏的定宽

#content {
   padding-left: 300px;
   padding-right: 200px;
}

(4) 设置左边栏

  1. 设置margin-left: -100%(此时移动到center里面最左端)
  2. 通过相对定位调整:
    1. 设置position: relative
    2. 设置right: 300px(此时移动到center外面最左端)
#content #left {
    position: relative;
    width: 300px;
    margin-left: -100%;
    right: 300px;
}

(5) 设置右边栏

右边栏只需要设置margin-right:-200px就可以移动到center外面最右边。

margin负值是指对其他元素来说不占空间,本来需要换行显示的,相当于不占空间之后,则可以显示到center的右边

#content #right {
  width: 200px;
  margin-right: -200px;
}

双飞翼布局

双飞翼布局和圣杯布局很类似,不过是在main的div里又插入一个div,通过调整内部div的margin值,实现中间栏自适应,内容写到内部div中。

实现

(1) 初始化html文件

<h1>双飞翼布局</h1>
<div id="main" class="column">
  <div id="mian-wrapper">Main</div>
</div>
<div id="left" class="column">Left</div>
<div id="right" class="column">Right</div>

(2) 给left, right添加float属性

.column {
    float: left;
}

(3) 给main-wrapper设置margin

#mian-wrapper {
      margin-left: 100px;
      margin-right: 50px;
}

(4) 设置左边栏


#left { 
    width: 100px; 
    margin-left: -100%;
}

(5) 设置右边栏

#right {
  width: 50px;
    /*是因为同行挤不下才到下一行的,往左移动50px即可*/
  margin-left: -50px;
}

完整代码

圣杯布局

<style>
  body {
    min-width: 500px;
  }
  div {
    text-align: center;
  }
  #content {
    padding-left: 300px;
    padding-right: 200px;
  }
  #content #center {
    width: 100%;
  }
  #content #left {
    /*注意这里的position: relative*/
    position: relative;
    width: 300px;
    margin-left: -100%;
    right: 300px;
  }

  #content #right {
    width: 200px;
    margin-right: -200px;
  }

  #content .column {
    float: left;
  }
  #footer {
    clear: both;
  }
</style>
<body>
<h1>圣杯布局</h1>
<div id="header">Header</div>
<div id="content">
  <div id="center" class="column">Center</div>
  <div id="left" class="column">Left</div>
  <div id="right" class="column">Right</div>
</div>
<div id="footer">Footer</div>
</body>

双飞翼布局

<style>
    div {
      text-align: center;
    }
    #main {
      width: 100%;
    }
    #mian-wrapper {
      margin-left: 100px;
      margin-right: 50px;
    }
    #left {
      width: 100px;
      margin-left: -100%;
    }
    #right {
      width: 50px;
      /*注意这里是margin-left*/
      margin-left: -50px;
    }
    .column {
      float: left;
    }
  </style>
</head>
<body>
  <h1>双飞翼布局</h1>
  <div id="main" class="column">
    <div id="mian-wrapper">Main</div>
  </div>
  <div id="left" class="column">Left</div>
  <div id="right" class="column">Right</div>
</body>