CSS经典布局--圣杯布局和双飞翼布局

时间：2022-09-10 12:30:00 1000w100rj电阻

圣杯布局和双飞翼布局都是三列布局的经典布局。
双飞翼布局是圣杯布局优化版，由淘宝UED提出；
它们的效果图相似，但实现方法不同。

文章目录

- 一、传统的圣杯布局和双飞翼布局方法
- - 1.圣杯 position 解决方案(不推荐):
  - 2.双飞翼布局：
- 二、圣杯布局--flex(推荐)

一、传统的圣杯布局和双飞翼布局方法

首先打好基础(两者共享)

DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title>1111title> head> <style> .header, .footer { 
           height: 50px; background: lightblue; } .center { 
           width: 100%; height: 500px; background: lightgray; float: left; } .left { 
           width: 200px; height: 500px; background: lightpink; float: left; margin-left: -100%; /* 浮动，w100%，不在同行 */ } .right { 
           width: 300px; height: 500px; background: lightgreen; float: left; margin-left: -300px; } .clearfix::before, .clearfix::after { 
           content: ""; display: block; clear: both; } style>

<body>
  <div class="header">头部div>
  <div class="main clearfix">
    
    <div class="center">
      中间自适应
    div>
    <div class="left">左列定宽div>
    <div class="right">右列定宽div>
  div>
  <div class="footer">底部div>
body>

html>

此时 “center” 中间自适应被遮挡

1.圣杯 position 解决（不推荐）：

css

  /* 圣杯 */
  .main { 
        
    margin-left: 200px;
    margin-right: 300px;
  }

  .left { 
        
    position: relative;
    left: -200px;
  }

  .right { 
        
    position: relative;
    right: -300px;
  }

解决了遮挡，但是当屏幕缩小，布局会乱！！！

2.双飞翼布局：

html

// center 加个div 文字放里面 
<div class="center">
      <div class="inner">中间自适应div>
div>

css

  /* 双飞翼 */
  .inner { 
        
    /* height: 100%; */
    margin:0 300px 0 200px;
    border: 2px solid red;
  }

二、圣杯布局–flex实现（推荐）

DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>圣杯-flextitle>
head>
<style> #header, #footer { 
           background: yellowgreen; height: 60px; line-height: 60px; } #container { 
           display: flex; } #container .column { 
           height: 300px; line-height: 300px; } #center { 
           flex-grow: 1; background: gray; } #left { 
           width: 200px; order: -1; background: beige; } #right { 
           width: 200px; background:paleturquoise; } style>

<body>
  <div id="header">#headerdiv>
  <div id="container">
  	<div id="center" class="column">#centerdiv>
    <div id="left" class="column">#leftdiv>
    <div id="right" class="column">#rightdiv>
  div>
  <div id="footer">#footerdiv>
body>

html>

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

CSS经典布局--圣杯布局和双飞翼布局

文章目录

相关文章