登录  /  注册
首页 > web前端 > css教程 > 正文

css实现左(右)侧固定宽度,右(左)侧宽度自适应 ---清除浮动

高洛峰
发布: 2016-10-15 09:17:38
原创
1096人浏览过

老话长谈,css的不固定适应布局   不管是面试还是在平时的工作中,这样的布局形式一直都在用着,很常见,所以今天我就拿出来在唠叨一下, 既是给自己一个备忘存储,也是一个学习巩固的参考,知道大家都会,还是要记忆一下,不为其他,就为打好基础。

话说太多, 直接上代码,一看就能明白。 也许你会不屑一顾的说简单,可是我就喜欢写一些。。。。。。作为一个菜鸟,就要从基础努力学习才行。

方法多种, 你有新的方法可以补充说明,在此感谢!!

一、左边布局固定,右边自适应的布局

   <div class="whole">
        <p>自适应测试</p>
           <div class="left">固定左侧 300px</div>
        <div class="right">右侧自适应</div>
 </div>
登录后复制

方法1: 左侧用float浮动,给固定宽度,右侧 左边距的距离==左侧层的宽度

  css代码:

    .left{ float:left;width:300px; background:red}
    .right{ margin-left:300px; background:green; width:100%}
登录后复制

方法2:左边绝对定位absolate,右边代码没变化 还是右侧 左边距的距离==左侧层的宽度;

  css代码:

    .left{ position: absolute; left:0; width:300px; background:red}
    .right{ margin-left:300px; background:green; width:100%}
登录后复制

方法3(个人喜好用):左右两边都用绝对定位absolute, 父级相对定义(不影响,建议加个相对定义,避免重叠)

  css代码:

    .left{ position: absolute; left:0; width:300px; background:red}
    .right{ position: absolute; left:300px; background:green; width:100%}
登录后复制

二、左边布局不固定,右边布局固定-----方法一致,位置换下而已

   <div class="whole">
        <p>自适应测试</p>
           <div class="left">左侧自适应</div>
        <div class="right">右侧宽度固定</div>
  </div>
登录后复制

方法1、左侧用左浮动,右边距==右侧层的宽度的负值(因为你是左撑开,距离右侧的距离不错层), 右侧的有浮动,固定宽度

      .left{ float:left; width:100%; margin-right:-300px; background: red; }
  .right{ float: right; width: 300px;background: blue;}
登录后复制

方法2、左右两边都用绝对定位absolute, 父级相对定义(不影响,建议加个相对定义,避免重叠)

       .left{ position: absolute; left:0;  width: 100%;  background: red;}
  .right{ position: absolute;  left:200px; width:200px; background: green;}
登录后复制

方法3、

清除浮动的方法就一笔带过, 都会

1、在浮动层的下面单独定义一个层

.clear{ clear:both}

2、伪类方法:after (用在父类的布局层上)-常用

         .father::after,.father::before{ clear: both; content: ""; display: table;}
     <div class=&#39;father&#39;>
          <div class="son-flotleft"></div>
     <div class="son-flotrgt"></div>
     </div>
登录后复制

  3、父级元素设置overflow为hidden或者auto,固定高度 也可以--不建议 

        .father{overflow:hidden; width: 100%; }   //overflow:auto; height:300px;
登录后复制
智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号