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


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

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

    如:

      <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
     
      <style>
            .left {
                 100px;
                height: 100px;
                background-color: darkgoldenrod;
                float: left;
            }

            .center {
                margin-left: 100px;
                margin-right: 100px;
                height: 100px;
                background-color: darkmagenta;
            }

            .right {
                 100px;
                height: 100px;
                background-color: darkgreen;
                float: right;

            }
    2.绝对定位
    把左右盒子设置为绝对定位。
     .left {
                 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;
                 100px;
                height: 100px;
                position: absolute;
                right: 0;
                background-color: darkgreen;


            }
  • 相关阅读:
    第三方模块加载时出现XXX运行 提示错误:无法加载文件 C:UsersgxfAppDataRoaming pmXXX.ps1,因为在此系统上禁止运行脚本。
    node模块化
    前端面试集锦
    将字符转换成驼峰表示法
    JavaScript数据处理
    大数据基础整合
    移动端网页特效
    本地存储
    DOM重点核心
    触发器SQL
  • 原文地址:https://www.cnblogs.com/xiaopo/p/14289100.html
Copyright © 2020-2023  润新知