zoukankan      html  css  js  c++  java
  • HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位

    <!DOCTYPE html>
    <html>
      <head>
        <title>三列布局</title>
        <link rel="stylesheet" type="text/css" href="task0001.css">
      </head>
      <body>
    
        <div class="wrap">
          <div>三列布局1</div>
          <div class="one col-3-one">one</div>
          <div class="three col-3-three">three</div>
          <div class="two col-3-two">two</div>
        </div>
    
      </body>
    </html>
    .wrap {
      position: relative;
    }
    
    .one{
      width: 40px;
      background: blue;
    }
    
    .two {
      background: yellow;
    }
    
    .three {
      width: 40px;
      background: red;
    }
    
    .col-3-one {
      position: absolute;
      left: 0px;
    }
    
    .col-3-three {
      position: absolute;
      right: 0px;
    }
    
    .col-3-two {
      position: static;
      margin-left: 40px;
      margin-right: 40px;
    }

    第二种方法:浮动定位

    <!DOCTYPE html>
    <html>
      <head>
        <title>三列布局</title>
        <link rel="stylesheet" type="text/css" href="task0001.css">
      </head>
      <body>
    
    
        <div >
          <div>三列布局2</div>
          <div class="one col-3-one-float">one</div>
          <div class="three col-3-three-float">three</div>
          <div class="two col-3-two">two</div>
        </div>
      </body>
    </html>
    .wrap {
      position: relative;
    }
    
    .one{
      width: 40px;
      background: blue;
    }
    
    .two {
      background: yellow;
    }
    
    .three {
      width: 40px;
      background: red;
    }
    
    .col-3-two {
      position: static;
      margin-left: 40px;
      margin-right: 40px;
    }
    
    .col-3-one-float {
      float: left;
    
    }
    
    .col-3-three-float {
      float: right;
    }

    两种方法本质上的差别不大,结构都是两个脱离文档流的div和一个直接以文档流定位的div。

    文档流是文档中可显示对象在排列中所占的位置。而浮动和绝对定位都是不占空间。

    注意:

    1.使用绝对定时时,其父元素是被定位的(就是position是除了static的),如果没有被定位的父元素,则相对于body被定位

    2.两个脱离文档流的div都需要在正常div的上方,否则第二个div会占满屏幕,而第三个脱离文档流的div被直接挤到下方。

  • 相关阅读:
    计算机网络知识总结-网络安全
    域名恶意指向的解决方法
    域名恶意解析的原因是什么
    域名被人恶意解析的解决方法
    防止域名被恶意解析
    公安部网防G01-网站安全卫士软件/linux防御
    详解web容器
    关于 服务器ip和域名进行一个绑定
    重新温习软件设计之路(2)
    重新温习软件设计之路(1)
  • 原文地址:https://www.cnblogs.com/AminHuang/p/4424650.html
Copyright © 2011-2022 走看看