• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

两栏自适应布局

134 0

两栏自适应布局,顾名思义就是当左边的高度高于右边时,右边会自动补全至其等同于左侧的高度!

示意图

-75

方法有三种,按原理来算应该只能算两种,为此我们慢慢道来:

第一种:margin控制外部大小的方式

HTML代码:

<div class="div1">
   <div class="left">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
   </div>
   <div class="right">
      <p>1</p>
      <p>2</p>
      <p>3</p>
   </div>
</div>

CSS部分:

.div1 {
    overflow:hidden;
      }
.left {
     width:50%;
     float:left;
     background:#666;
     margin-bottom:-9999px;
     padding-bottom:9999px;
      }
.right {
     width:50%;
     float:left;
     background:#999;
     margin-bottom:-9999px;
     padding-bottom:9999px;
       }

原理:

通过margin的负值-9999px让元素外部大小减小,然后再添加padding值9999px让这个外部大小为0(9999-9999=0),虽然这个外部大小为0了,但是视觉层(padding)多了9999px;这样我们给他们的父元素添加超出部分隐藏,就会如示意图一样,不足的部分就会自动填充,形成自适应,实际上就是一个padding显示了而已!


第二种:margin控制外部大小的方式,用border增加高度!

HTML代码:

和第一种一样,只是CSS部分不同!

CSS部分:

.div1 {
    overflow:hidden;
      }
.left {
     width:50%;
     float:left;
     background:#666;
     margin-bottom:-9999px;
     border-bottom:9999px solid #666;
      }
.right {
     width:50%;
     float:left;
     background:#999;
     margin-bottom:-9999px;
     border-bottom:9999px solid #999;
       }

原理:

和第一种一样,只是第一种是用padding来增加高度,这里是用border来增加!


第三种:将元素设置display:table-cell

HTML部分:

和第一种一样,只是CSS部分不同!

CSS部分:

.div1 {
   /* overflow:hidden;(已经不需要超出部分隐藏了,注释掉!) */
      }
.left {
     width:500px;
     background:#666;
     display:table-cell;
      }
.right {
     width:500px;
     background:#999;
     display:table-cell;
       }

原理:

我们将两个需要自适应的元素其display属性改为table-cell表格属性,表格在css定义是天生自适应高度的,也就是说啥也不用干,改成这个属性就可以自适应高度了,简单方便,代码维护方便,在不考虑兼容ie7-ie8这些远古版本的话,完全就是可以日常使用了!个人推荐这个!

其实table-cell还可以很方便的设置内部内容的居中垂直对齐,把表格布局的一些精髓完全精简至现代代码中,这也是导致以前表格布局没落的原因之一!有兴趣可以百度也可以底下留评论发表看法,当然也可以要求博主再来一篇!233...

0

相关文章

微信收款码
微信收款码