实现圣杯布局的三种方法

以你之姓@ 2023-06-30 15:54 10阅读 0赞

第一题:实现左边固定200px， 左右自适应布局的方法(圣杯布局)

1.  ## 用flex布局方式 ##
    
    把左边的框度写死，右边的设置flex:1

<div class="box">   
     <div class="left">左边</div>   
      <div class="right">右边</div>
      </div>
      <div class="footer"></div>
    
    <style>
    .box{   
      height:200px; 
       width:600px;
       display:flex; 
       }
     .left{ 
      width:200px;
      height:200px; 
     }
     .right{ 
       height:200px;
       flex:1;
     }
    </style>

2.\#\# Css3新盒子模型给左边一个200px的padding  
道理和代码同上，就是把rigt 的盒子模型给为display:border-box 宽度不设置  
3.\#\# 普通盒子模型，但是子盒子不设置框度，加浮动实现给左边一个200px的margin  
首先创建一个大的div盒子，起类名为bix,它含有两个子div盒子，一个类名为left ,一个为right  
然后底部区域清除浮动，防止跟随上边的区域一起浮动。  
把右边的来名为right的浮动设置框度为100%

<div class="box">
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <div class="footer"></div>
    
    <style>
    // css样式
    .box{   
      height:200px;
      width:600px;
      padding-left:200px; 
      }
      .footer{ 
       clear:both;
      }
     .left{ 
      width:200px;
      height:200px;
      float:left;
     }
     .right{ 
      width:100%;
      height:200px;
     }
      
      </style>

1.  grid网格(考虑浏览器兼容问题)，

<style>
    
    .box{ 
      height:200px;
      width:600px;
      display:grid;
      grid-template-columns: 200px auto ;
      }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关圣杯布局

<style> * { padding: 0; margin: 0; ...

逃离我推掉我的手/ 2024年04月19日 11:33/ 0 赞/ 85 阅读

相关实现圣杯布局的三种方法

第一题:实现左边固定200px，左右自适应布局的方法(圣杯布局) 1. 用flex布局方式把左边的框度写死，右边的设置flex:1 <!

以你之姓@/ 2023年06月30日 15:54/ 0 赞/ 11 阅读

相关圣杯布局的实现过程

圣杯布局和双飞翼布局，它们都要求三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，而双飞翼布局是对圣杯布局的一种改良，下一篇会讲到。圣

骑猪看日落/ 2022年07月14日 05:21/ 0 赞/ 169 阅读

相关圣杯布局的介绍与实现

1、通过圣杯布局、双飞翼布局、flex布局实现左中右3栏布局（左右固定，中间流动布局）产生原因：以前实现左中右必须按照源顺序（在 DOM 中表现为先写 Left，然后 Mi

太过爱你忘了你带给我的痛/ 2022年05月19日 14:11/ 0 赞/ 138 阅读

相关 CSS 圣杯布局

圣杯布局，不要被名字所迷惑只是一种简单的布局方式，也不知道从何时起，这种布局方式有了这么响亮的外号。 CSS+DIV 最常见的分栏布局就是浮动布局啦，以Bootstrap框架

川长思鸟来/ 2022年05月12日 13:58/ 0 赞/ 224 阅读

相关详解圣杯布局

圣杯布局 html结构： <!doctype html> <html lang="en"> <head> <meta cha

以你之姓@/ 2022年04月25日 00:14/ 0 赞/ 412 阅读

相关三列自适应布局(圣杯布局)

介绍简单来说就是页面分为左中右3个部分，其中左右两侧固定宽度，而中间部分自适应。实现假设每列的高度为150px，左列宽度为200px，右列宽度为

旧城等待，/ 2022年01月19日 22:25/ 0 赞/ 356 阅读

相关圣杯布局

.left{100px}.right{100px}.center{ calc(100% - 200px) } 圣杯布局复制代码转载于:h

布满荆棘的人生/ 2022年01月19日 03:05/ 0 赞/ 279 阅读

相关经典布局（flex和传统两种实现）—圣杯布局

所谓圣杯布局（三栏加页眉页脚）一张图解释就是 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

╰+哭是因爲堅強的太久メ/ 2022年01月11日 11:53/ 0 赞/ 268 阅读

相关圣杯布局

圣杯布局要实现两边固定，中间自适应，中间部分的代码要放在最上面实现优先加载步骤第一步：创建middle，left，right，及包裹它们的父盒子cont

不念不忘少年蓝@/ 2021年08月29日 02:34/ 0 赞/ 436 阅读