ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

设置一个两边固定中间自适应的css

2021-01-17 15:32:31  阅读:158  来源: 互联网

标签:right 设置 color 100px height background 两边 css left


1.两边浮动,中间自动宽度

给左右两个盒子设置左右浮动,中间的盒子不设置宽度,左右两边边距为左右盒子的宽度,中间盒子的位置必须写在右盒子下面,不然会把右盒子挤下去

如:

  <div class="left"></div>     <div class="right"></div>     <div class="center"></div>     <style>         .left {             width: 100px;             height: 100px;             background-color: darkgoldenrod;             float: left;         }
        .center {             margin-left: 100px;             margin-right: 100px;             height: 100px;             background-color: darkmagenta;         }
        .right {             width: 100px;             height: 100px;             background-color: darkgreen;             float: right;
        } 2.绝对定位 把左右盒子设置为绝对定位。  .left {             width: 100px;             height: 100px;             position: absolute;             left: 0;             background-color: darkgoldenrod;
        }
        .center {             margin-left: 100px;             margin-right: 100px;             height: 100px;             background-color: darkmagenta;         }
        .right {             top: 0;             width: 100px;             height: 100px;             position: absolute;             right: 0;             background-color: darkgreen;

        }

标签:right,设置,color,100px,height,background,两边,css,left
来源: https://www.cnblogs.com/xiaopo/p/14289100.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有