zoukankan      html  css  js  c++  java
  • 三栏布局:左右固定中间自适应

      <div class="left">left</div>
           <div class="right">right</div>
           <div class="main">main</div>

    1.position: absolute方式

      *{
                margin: 0;
                padding: 0;
            }
            .left,.right{
                position: absolute;
                top: 0;
                border: 1px solid black;
                 300px;
                min-height: 500px;
            }
            .left{
                left: 0;
            }
            .right{
                right: 0;
            }
            .main{
                margin: 0 300px;
                background-color:red;
                border: 1px solid green;
                min-height: 500px;
            }
    2.float: left方式
      *{
                margin: 0;
                padding: 0;
            }
      .left,.right{
                float: left;
                 300px;
                background-color: red;
                border: 1px solid black;
                height: 500px;
            }
            .right{
                overflow: auto;
                float: right;
            }
            .main{
                margin: 0 300px;
                background-color: hotpink;
                height: 500px;
                border: 1px solid black;
            }
    3.display: flex方式
      .content{
                display: flex;
            }
            .aside.left{
                order: 1;
                border: 1px solid black;
                 200px;
            }
            .aside.right{
                order: 3;
                border: 1px solid black;
                 200px;
            }
            .aside.main{
                order: 2;
                flex-grow: 1;
                border: 1px solid red;
            }
            .aside{
                height: auto;
            }
      <div class="content">
              <div class="left aside">left</div>
              <div class="right aside">right</div>
              <div class="main aside">main</div>
           </div>
    ————学习记录
  • 相关阅读:
    DOM——《JavaScript高级程序设计》笔记
    (转)用js无法获取style样式的问题解析与解决方法
    【2】可视化格式模型、背景、链接、表格表单——《精通CSS‘》
    安装sql server 2008 R2,提示错误:此计算机上安装了 Microsoft Visual Studio 2008 的早期版本。请在安装 SQL Server 2008 前将 Microsoft Visual Studio 2008 升级到 SP1。
    C#读取Word表格中的数据 (转)
    C#在Word文档指定位置处理表格
    c#操作word书签
    c# 操作word的
    函数参数压栈顺序2
    可变长参数
  • 原文地址:https://www.cnblogs.com/atao24/p/13305897.html
Copyright © 2011-2022 走看看