• 我学习的三种三栏(左中右)布局方法


    我学习的三种三栏(左中右)布局方法(不想要自适应的话设置一个宽度即可)

    1. 绝对定位方法,两边用绝对定位固定在窗口两边,中间采用自适应宽度,利用margin属性把两边撑开。代码如下:

      <style type="text/css">
      
      * {margin: 0;}
      
      .left{position: absolute;top: 0;left: 0; 300px;height: 300px;background: #ccc;}
      
      .right{position: absolute;top: 0;right: 0; 300px;height: 300px;background: #ccc;}
      
      .main{margin: 0 300px;height: 300px;background: #f00;}
      
      </style>
      
       
      
      <body>
      
      <div class="left">左列</div>
      
      <div class="main">中间</div>
      
      <div class="right">右列</div>
      
      </body>

      优点:比较简单容易,受到内部影响不大

      缺点:中间有最小宽度的限制,当宽度小到一定值,会发生元素重叠的情况

    2. margin负值方法,此方法要让中间内容放在最前面,并且要使用一个容器把其包起来,外层width设置为100%,随屏幕自适应,然后让外层元素整体浮动,内层为真正的内容,左右两列均采用margin负值定位,左列左浮动,然后设置margin-left为-100%,右列也设置左浮动,然后设置margin-left为自身的宽度的负值。代码如下:

      <style type="text/css">
      
      * {margin: 0;}
      
      .wrap { 100%;height: 300px;float: left;}
      
      .wrap .main {margin: 0 300px;height: 300px;background: #f00;}
      
      .left,.right {float: left; 300px;height: 300px;background: #ccc;}
      
      .left {margin-left: -100%;}
      
      .right {margin-left: -300px;}
      
      </style>
      
       
      
      <body>
      
      <div class="wrap">
      
      <div class="main">中间</div>
      
      </div>
      
      <div class="left">左列</div>
      
      <div class="right">右列</div>
      
      </body>

      优点:三列相互关联,受到内部影响不大

      缺点:比较难理解,相对其他比较复杂

    3. 浮动方法,此方法要让中间内容放在最后面,左列左浮动,右列右浮动,中间利用浮动的跟随性,实现三列自适应布局,代码如下:

      <style type="text/css">
      
      * {margin: 0;}
      
      .left {float: left; 300px;height: 300px;background: #ccc;}
      
      .right {float: right; 300px;height: 300px;background: #ccc;}
      
      .main {margin: 0 300px;height: 300px;background: #f00;}
      
      </style>
      
       
      
      <body>
      
      <div class="left">左列</div>
      
      <div class="right">右列</div>
      
      <div class="main">中间</div>
      
      </body>

      优点:简单易懂,代码简洁

      缺点:中间内容不能使用clear:both属性

        除了第一种绝对定位方法可以不在意左中右三列div的顺序,第二种margin负值和第三种浮动方法都需要注意左中右三列div的顺序,第二中方法需要给中间内容套一层父级div元素。以上就是我学习的三种三列自适应布局的方法。

  • 相关阅读:
    POJ-1182 食物链
    hdu 1879 继续畅通工程
    HDU 2604 Queuing
    hdu 1232 畅通工程
    POJ-1611 The Suspects
    Free DIY Tour
    Tr A
    不容易系列之(3)―― LELE的RPG难题
    W3C标准冒泡、捕获机制
    JavaScript 浏览器事件解读
  • 原文地址:https://www.cnblogs.com/zhang-xun/p/6762633.html
Copyright © 2020-2023  润新知