左侧固定右侧自适应，右侧固定左侧自适应，左右两边固定中间自适应的几种方法

最新推荐文章于 2024-02-08 10:14:31 发布
最新推荐文章于 2024-02-08 10:14:31 发布
阅读量1.6k 收藏 5
点赞数 1
分类专栏： html

1. 左侧固定右侧自适应的方法

  • 定位法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
   .father{
      width: 100%;
      height: 300px;
      background-color: yellow;    
      position: relative;
      padding-left: 200px;
      box-sizing: border-box;
   }
   .left{ 
     position: absolute;
     left: 0;
     top: 0;
     width: 200px;
     height: 80%;   
     background-color: snow;
   }
   .right{  
     width: 100%;
     height: 100%;   
     background-color: lightblue;
   } 
  </style>
</head>
<body>
  <div class="father">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>
  • flex法（伸缩盒子）
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <style>
   .father{
      width: 100%;
      height: 500px;
      background-color: lightblue;
      display: flex;
   }
   .left{
      width: 300px;
      height: 90%;
      background-color: rgb(175, 175, 49);
     }
     .right{
      flex: 1;
      background-color: lightgreen;
     } 
  
  </style>
</head>
<body>
  <div class="father">
     <div class="left"></div>
     <div class="right"></div>
  </div>
</body>
</html>
  • bfc 法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .father{
      width: 100%;
      height: 500px;
      background-color: rgb(125, 138, 196);     
    }
    .left{
      float: left;
      width: 200px;
      height: 80%;      
      background-color: lightblue;
    }
    .right{        
       overflow: hidden;
      /*  注意点右侧不可设置宽度  */
       height:450px;
       background-color: yellow;
    }
  

    /* 利用 bfc 实现的左侧固定，右侧自适应
      1--让左侧的盒子左浮动个，
      2--让右侧的盒子 overflow:hidden;
         注意点右边的盒子不可设置宽度。
         
      bfc就素块级格式化上下文
      特点：
      1--成为了bfc的盒子，就是一个独立的渲染区域，子元素的布局不会影响的外面的其他元素。
         应用： 清除浮动
                解决塌陷的问题
      2--  成为了bfc 的盒子额，不能与浮动的元素重叠
           用在：实现左侧固定右侧自适应。或者圣杯  


      触发bfc
       1-- 浮动
       2-- display:table /table-cell
       3-- o=position:fixed/absolute
       4-- overflow  非 visible (hidden auto scroll)    
     */
  </style>
</head>
<body>
  <div class="father">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

2. 右侧固定左侧自适应的方法

  • 定位法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
   .father{
      width:100%;
      height: 500px;
      background-color: lightblue;
      position: relative;
      padding-right: 300px;
      box-sizing: border-box;
   }
   .rigth{
      position: absolute;
      right: 0px;
      top: 0px;      
      width: 300px;
      height: 90%;
      background-color: rgb(21, 128, 21);
   }
   .left{
      height: 95%;
      background-color:#ccc;
   }   
    </style>
</head>
<body>
  <div class="father">
     <div class="left"></div>
     <div class="rigth"></div>
  </div>
  
</body>
</html>
  • flex法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
   .father{
      width:100%;
      height: 500px;
      background-color: lightblue;
   }
   .rigth{
      float: right;
      width: 300px;
      height: 90%;
      background-color: rgb(21, 128, 21);
   }
   .left{
     height: 95%;
     overflow: hidden;
     background-color: lightyellow;
   }
  </style>
</head>
<body>
  <div class="father">
    <div class="rigth"></div>
    <div class="left"></div>
  </div>
</body>
</html>
  • bfc法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
   .father{
      width: 100%;
      height: 500px;
      background-color: skyblue;
   }
   .left{
      height: 100%;
      overflow: hidden;
      background-color: yellow;
   }
   .right{
      float: right;
      width: 200px;
      height: 70%;
      background-color: #ccc;
   } 
  </style>
</head>
<body>
  <div class="father">
   <!--注意先放了右边吖-->
    <div class="right"></div>
    <div class="left"></div>
  </div>
</body>
</html>

3. 左右两边固定中间自适应的方法

  • 定位法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
   .outer{
     width: 100%;
     height: 300px;
     background-color: skyblue;
     position: relative;
     padding: 0px 200px;
     box-sizing: border-box;
   }
   .left{
    width: 200px;
     height: 80%;
     background-color: #fe2;
     position: absolute;
     left: 0;
    top:0;

   }
   .right{
     width: 200px;
     height: 80%;
     position: absolute;
     background-color: #dae;
     right: 0px;
     top:0px;
   }  
  .mid{
     overflow: hidden;
     height: 100%;
     background-color: lightgreen;
  } 
  </style>
</head>
<body>
  <div class="outer">
    <div class="left"></div>
     <div class="mid"></div>
    <div class="right"></div>
  </div>
</body>
</html>
  • flex法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
   .box{
     display: flex;
     width: 100%;
     height: 400px;
     background-color: lightblue;
   }
   .left{     
      height: 80%;
      width: 200px;
      background-color: yellow;     
   }
   .right{
      float: left;
      height: 80%;
      width: 200px;
      background-color: #ccc;     
   }
   .center{      
     height: 200px;
     background-color: lightpink;    
     flex: 1;
   }
  </style>
</head>
<body>
 <div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
 </div>
</body>
</html>
  • bfc 法 (注意是左右先写浮动的元素，它们脱标了，后面的标准流的元素才会上去)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
   .outer{
     width: 100%;
     height: 300px;
     background-color: #ad0;
   }
   .left{
    width: 200px;
     height: 90%;
     background-color: rgb(230, 230, 115);
    float: left;
   }
   .right{
     width: 200px;
     height: 90%;
     background-color: lightgrey;
     float: right;
   }
   .mid{  
     overflow: hidden;
     height: 100%;
     background-color: #348;
   }
  
  </style>
</head>
<body>
  <div class="outer">  
    <div class="left"></div>
    <div class="right"></div>
    <div class="mid"></div>
  </div>
</body>
</html>
courageFei
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
两边宽度固定，中间宽度自适应的几种布局方法
xiamocsdn的博客
04-24 3479
我们在用css设置页面布局的时，归根结底是要让页面中的块按照我们的需求进行排列组合。以下是几种常用的中间自适应，两边固定的布局方法。 一、flex弹性盒布局： 核心：将父元素设置为弹性盒布局：display:flex; html代码： <div id="father"> <div id="son1"><h3>宽度固定</h3></div&g...
flex布局 左边固定右边自适应宽度，上边固定下边自适应高度
qq_43039004的博客
12-09 8814
两块内容 <div class="box"> <div class="left"></div> <div class="right"></div> </div> 1、左边宽度固定，右边宽度自适应铺满 .box { display:flex; height:100%; width:100%; } .left { height:100%;
解决左边宽度固定，右边宽度随浏览器自适应的3种方案
最新发布
weixin_42017221的博客
02-08 1209
实现左边固定，右边随浏览器自适应的主要是通过 flex 布局或者 float 浮动。使用 float 时，左边元素设置固定宽度，右边元素设置相应的 margin-left 值。使用 flex 时，如果左边元素宽度使用 flex-basis 属性，右边元素可设置 flex-grow 为 1 或者 flex 为 1。如果左边元素宽度使用 min-width 属性，右边元素除了可以设置 flex-grow 为 1，或者 flex 为 1，还可以设置宽度 100%。
flex布局左边固定，右边自适应，右边内容超出会影响布局
qq_43340606的博客
11-11 2425
左侧宽度固定，右侧自适应 .left-div{ width: 200px; } .right-div{ flex: 1; } 右边内容超出的话，就会导致左边固定的宽度大小不起重要了，这时只需要加上min-width: 0;就可以了 .right-div{ flex: 1; min-width: 0; } ...
css布局两边固定中间自适应的四种方法
weixin_30642305的博客
04-29 798
第一种：左右侧采用浮动 中间采用margin-left 和 margin-right 方法。 代码如下： <div style="width:100%; margin:0 auto;"> <div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</di...
左侧固定，右侧自适应（两种方法任选）
09-24
本文主要介绍了左侧固定，右侧自适应的两种实现方法，相信对大家学习网页布局会有很好的帮助，下面就跟小编一起来看下吧
css实现左侧固定右侧自适应的布局方式
09-22
主要介绍了css实现左侧固定右侧自适应的布局方式，详细的介绍了3种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML实现2列布局(左侧宽度固定，右侧自适应)的方法示例
09-22
主要介绍了HTML实现2列布局(左侧宽度固定，右侧自适应)的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css 两边固定中间自适应布局的实现
09-22
主要介绍了css 两边固定中间自适应布局的实现，介绍了四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
热门推荐
LonelySnow的博客
04-08 2万+
1.应用场景 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决，需要攻克以下两点： 1）让两个div并排到一行 2）让一个div宽度固定，另个div占据剩下宽度的空间 关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； ...
CSS布局——左边固定，右边自适应的4种方法
lwf的博客
04-06 7936
HTML： &lt;div class="outer"&gt; &lt;div class="left"&gt;我在左边&lt;/div&gt; &lt;div class="right"&gt;我在右边&lt;/div&gt; &lt;/div&gt; &lt;div
七种右边固定，左边自适应两栏布局
RunCoder
05-01 1173
参考文章实现了``右边固定，左边自适应``的两栏布局的七种方法。最终的效果，可以查看这里https://hangforfreedom.github.io/some-cases/demo-4/demo.html。  与原案例不同的是右边``div``和左边``div``在html源码中的书写的先后顺序也是不同的。  所以我将右边div分为两个类，一个是书写在左边div上面的``top-right``...
CSS布局-两边固定，中间自适应
Baron技术博客
09-11 898
直接上代码 *{ margin:0; padding:0px;} .header{ background:#666; text-align:center;} .body{ overflow:hidden;*zoom:1;} .wrap-2{ margin-top:30px;}
flex 实现左边固定右边自适应布局
qq_40259123的博客
06-30 1184
左边宽度固定，右边自适应
LuckXinXin的博客
05-24 989
左侧固定宽度，右侧自适应宽度的两列布局实现 html结构 <div class="outer"> <div class="left">固定宽度</div> <div class="right">自适应宽度</div> </div> 在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中left为固定宽度，而right为自适应宽度 方法1：左侧div设置成浮动：flo...
html css实现左右两列固定宽度中间自适应效果
小利的博客
08-30 4391
实现有很多方法 浮动，固定定位，和css布局，这篇文章通过浮动和display:table-sell 两种方法来实现。1.float和margin css部分：.main{overflow:hidden;min-width:405px;} .left,.right,.center { color: #fff;word-wrap: break-word;min-height:500px;}
CSS三联布局，两端固定，中间自适应
前端开发学习——Teds
04-07 636
1、float方法 给左右增加浮动，中间不变，但是一定要将中间的内容放在HTML结构的最后，否则右侧会沉在中间内容的下侧 两边固定宽度，中间宽度自适应。 利用中间元素的margin值控制两边的间距 宽度小于左右部分宽度之和时，右侧部分会被挤下去 <div class="left">左</div> <div class="rig...
css实现两边固定，中间自适应
杨前露的博客
12-12 1859
经常有需求，所以就总结一下，有需要的时候直接复制粘贴啦… 布局的原理是margin负值法。首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合，具体原理参考这里。这里对圣杯布局解释特别详细。 html: <div id = "wrap"> <di
vue-splitpane实现左边固定右侧自适应
05-05
要实现左边固定右侧自适应，可以使用 Vue.js 的 vue-splitpane 组件。vue-splitpane 是一个 Vue.js 的拆分窗格组件，可以用于创建可拆分的窗格布局。 下面是一个示例代码，可以实现左侧固定，右侧自适应的拆分窗格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值