zoukankan      html  css  js  c++  java
  • 三栏布局的几种方式

    这里介绍几种三栏布局的实现方式,最终目的都是左右两边固定宽度,中间的自适应。 

    最终效果如下:

    6、绝对定位三栏布局

       <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>绝对定位三栏布局</title>
      <style>
        * {
          margin: 0;
        }
        div.wrap {
          position: relative;
        }
        div.main {
          height: 400px;
          margin: 10px 210px 0 310px;
          background: blue;
        }
        div.left {
          position: absolute;
          300px;
          height: 400px;
          top: 0;
          left: 0;
          background: pink;
        }
        div.right {
          position: absolute;
          200px;
          height: 400px;
          top: 0;
          right: 0;
          background: yellow;
        }
      </style>
    </head>
    <body>
      <div class="wrap">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </body>
    </html>

    优点: 简单。

    缺点: 完美! 

     
  • 相关阅读:
    .Net Mvc 基于Filter实现对权限的扩展定制
    VS 2015 远程调试
    SVN 创建版本库
    .NET 调用支付宝沙箱接口
    selenium常用总结
    Python常用小技巧
    Centos7 安装Mysql 5.7
    Sqlserver 递归查询
    Sqlserver 中case when 的详细用法总结
    Asp.NetCoreWebApi入门
  • 原文地址:https://www.cnblogs.com/yuer20180726/p/11091417.html
Copyright © 2011-2022 走看看