前端三栏布局：双飞翼、圣杯、flex

最新推荐文章于 2022-11-03 16:27:45 发布

横冲直撞de

最新推荐文章于 2022-11-03 16:27:45 发布

阅读量154

点赞数

分类专栏： web前端基础知识

本文链接：https://blog.csdn.net/xiaopiaoliang777/article/details/119190207

版权

web前端基础知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

总结
1、圣杯布局
2、双飞翼布局
3、flex布局

总结

圣杯布局：container设置padding；center设置width：100%；left设置margin-left和position；right设置margin-left和position；（三个并列）
双飞翼布局：center设置100%；content设置margin；left只用设置margin-left：-100%；right只设置margin-left：-200px；（中间包含内容，再与左右并列）
flex布局：container设置display：flex；center设置flex：1；

在这里插入图片描述

1、圣杯布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>圣杯布局</title>
        <style>
          #header, #footer {background: gray;
                            text-align: center;height: 60px;line-height: 60px;}
          #footer {clear: both;}
          
          #container{padding: 0 150px 0 200px;height: 300px;}
          .col{float:left;height: 300px;line-height: 300px;text-align: center;}
          .center{width: 100%;background:blue;}
          .left{width:200px;background: red;margin-left:-100%;
                position: relative;left: -200px;}
          .right{width:150px;background: green;margin-left: -150px; 
                 position: relative;right: -150px;}
            
        </style>
    </head>
    <body>
      <div id="header">header</div>
        <div id="container">
            <div class="col center">middle</div>
            <div class="col left">left</div>
            <div class="col right">right</div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

2、双飞翼布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>双飞翼布局</title>
  <style>
    #header, #footer {background: gray;text-align: center;height: 60px;line-height: 60px;}
    #container {overflow: hidden;}
  
    .col {text-align: center;height: 300px;line-height: 300px;float: left;}
  
    .center{width: 100%;background: blue;}
    .content {margin: 0 150px 0 200px;}
  
    .left {width: 200px;margin-left: -100%;background:red;}
    .right {width: 150px;margin-left: -150px;background: green;}
    
  </style>
</head>
<body>
  <div id="header">#header</div>
 
  <div id="container">
    <div class="center col">
      <div class="content">#center</div>
    </div>
    <div class="left col">#left</div>
    <div class="right col">#right</div>
  </div>
 
  <div id="footer">#footer</div>
</body>
</html>

3、flex布局

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
       <title>flex方法</title>
      <style>
      #header, #footer {background: gray;text-align: center;height: 60px;line-height: 60px;}
      
      #container {display: flex;}
      .col {text-align: center;height: 300px;line-height: 300px;}
      .center {flex: 1;background: blue;}
      .left {width: 200px;background: red;}
      .right {width: 150px;background:green;}
    </style>
    </head>
    
    <body>
      <div id="header">#header</div>
      <div id="container">
        <div class="left col">#left</div>
        <div class="center col">#center</div>
        <div class="right col">#right</div>
      </div>
      <div id="footer">#footer</div>
    </body>
</html>

横冲直撞de

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端三栏布局：双飞翼、圣杯、flex

文章目录1、圣杯布局2、双飞翼布局3、flex布局4、总结1、圣杯布局<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>圣杯布局</title> <style> #header, #footer {background: gray; .
复制链接

扫一扫