我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
两栏自适应布局
两栏自适应布局,顾名思义就是当左边的高度高于右边时,右边会自动补全至其等同于左侧的高度!
示意图
方法有三种,按原理来算应该只能算两种,为此我们慢慢道来:
第一种: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
评论(0)