zoukankan      html  css  js  c++  java
  • 实现一个三列布局(左右侧固定,中间自适应宽度)

    html代码(第一二种方法):

    <div class="left">左侧固定区</div>
    <div class="right">右侧固定区</div>
    <div class="mid">中间自适应区</div>

    css代码:

    第一种方法(定位):

    .left {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 200px;
      background-color: red;
     }
    
     .mid {
      margin-left: 100px;
      margin-right: 200px;
      height: 200px;
      background-color: blue;
     }
    
     .right {
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
      height: 200px;
      background-color: yellow;
     }

    第二种方法(浮动):

    .left {
     float: left;
     width: 100px;
     height: 200px;
     background-color: red;
    }
    
    .mid {
     height: 200px;
     background-color: blue;
    }
    
    .right {
     float: right;
     width: 200px;
     height: 200px;
     background-color: yellow;
    }

    第三种方法(负边距):

    html代码:

    <div class="center fl">
      <div class="mid">
         中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区
      </div>
    </div>
    
    <div class="left fl">左边固定区</div>
    
    <div class="right fl">右边固定区</div>

    css代码:

    .fl { float: left; }
    
    .center {
      width: 100%;
      height: 200px;
      background: yellow;
    }
      .center .mid{
        margin-right: 100px;
        padding: 0 110px;
      }
    
    .left{
        margin-left: -100%;
        width: 100px;
        height: 200px;
        background: green;
    }
    
    .right{
        margin-left: -200px;
        width: 200px;
        height: 200px;
        background: blue;
    }
  • 相关阅读:
    Python Web框架Django (三)
    谷歌把域名标记为不安全的解决办法
    tkmybatis VS mybatisplus
    jdbc预编译实现方式
    分析mybatis中 #{} 和${}的区别
    实体类id的几种生成方式
    java 获取mac地址
    javafx 表格某一列设置未复选框
    关闭在chrome里使用双指前进后退页面的功能
    调试maven源代码
  • 原文地址:https://www.cnblogs.com/jimmiehwang/p/5393836.html
Copyright © 2011-2022 走看看