布局神器display:table-cell
来源:互联网 发布:苹果电脑直播音效软件 编辑:程序博客网 时间:2024/05/17 09:05
元素两端对齐
第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
* {
box-sizing: border-box;
}
.content {
display
: table;
border
:
1px
solid
#06c
;
padding
:
15px
5px
;
max-width
:
1000px
;
margin
:
10px
auto
;
min-width
:
320px
;
width
:
100%
;
}
.box {
width
:
100px
;
height
:
100px
;
border
:
1px
solid
#ccc
;
text-align
:
center
;
display
: inline-
block
;
font-size
:
40px
;
line-height
:
100px
;
}
.
right
{
text-align
:
right
;
display
:
table-cell
}
.
left
{
text-align
:
left
;
display
:
table-cell
}
1
2
3
4
5
6
7
8
<
div
class="content">
<
div
class="left">
<
div
class="box">B</
div
>
</
div
>
<
div
class="right">
<
div
class="box">A</
div
>
</
div
>
</
div
>
自动平均划分每个小模块,使其一行显示
第二个案例我们先看看图:
遇到上面这种布局,一般会用float来做,或者把每个li设置成display:inline-block;来做,并且都要给他们设置一个宽度,而且最痛苦的是5个li如果你设置width:20%;他们一定会掉下来,如果li都设置成display:table-cell;就不会出现这种情况,即使不设置宽度他们也会在一行显示,你在加多一行他也不会掉下来,依旧会在一样显示。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* {
box-sizing: border-box;
}
.content {
display
: table;
border
:
1px
solid
#06c
;
padding
:
15px
5px
;
max-width
:
1000px
;
margin
:
10px
auto
;
min-width
:
320px
;
width
:
100%
;
}
.content ul {
display
: table;
width
:
100%
;
padding
:
0
;
border-right
:
1px
solid
#ccc
;
}
.content ul li {
display
:
table-cell
;
border
:
1px
solid
#ccc
;
text-align
:
center
;
height
:
100px
;
border-right
:
none
;
line-height
:
100px
;
}
1
2
3
4
5
6
7
8
9
<
div
class="content">
<
ul
>
<
li
>1</
li
>
<
li
>2</
li
>
<
li
>3</
li
>
<
li
>4</
li
>
<
li
>5</
li
>
</
ul
>
</
div
>
图片垂直居中于元素
1
2
3
4
5
<
div
class="content">
<
div
class="img-box">
<
img
src="http://jsfiddle.net/img/logo@2x.png" alt="logo" />
</
div
>
</
div
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
* {
box-sizing: border-box;
}
.content {
display
: table;
border
:
1px
solid
#06c
;
padding
:
15px
5px
;
max-width
:
1000px
;
margin
:
10px
auto
;
min-width
:
320px
;
width
:
100%
;
}
.img-box{
height
:
150px
;
width
:
100px
;
border
:
1px
solid
red
;
display
:
table-cell
;
vertical-align
:
middle
;
text-align
:
center
;
background-color
:
#4679bd
;
}
两box实现等高对齐
上图中的左侧的box的高度始终跟随右侧的box的高度变化而变化
1
2
3
4
5
6
7
8
<
div
class="content">
<
div
class="img-box">
<
img
src="http://jsfiddle.net/img/logo@2x.png" width="70" alt="logo" />
</
div
>
<
div
class="text-box">
<
span
>王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。</
span
>
</
div
>
</
div
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
* {
box-sizing: border-box;
}
.content {
display
: table;
border
:
1px
solid
#06c
;
padding
:
15px
5px
;
max-width
:
1000px
;
margin
:
10px
auto
;
min-width
:
320px
;
width
:
100%
;
}
.img-box{
width
:
100px
;
border
:
1px
solid
red
;
display
:
table-cell
;
vertical-align
:
middle
;
text-align
:
center
;
background-color
:
#4679bd
;
}
.text-box{
margin-left
:
20px
;
border
:
1px
solid
#ddd
;
padding
:
10px
;
}
上面的案例不对右侧的box设置display:table-cell,只对左侧设置,所以就会出现左侧跟随右侧高度变化而变化。
如果要实现不管两个box哪个高度产生变化另一个就跟随,只需要把右侧的box也设置成display:table-cell就可以实现了。
弹性、响应式布局
1
2
3
4
5
6
7
8
9
<
div
class="content">
<
div
class="left-box">
<
img
src="https://www.google.com.hk/images/srpr/logo11w.png" width="70" alt="logo" />
</
div
>
<
div
class="right-box">
<
span
>王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。</
span
>
</
div
>
</
div
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
* {
box-sizing: border-box;
}
.content {
display
: table;
border
:
1px
solid
#06c
;
padding
:
15px
5px
;
max-width
:
1000px
;
margin
:
10px
auto
;
min-width
:
320px
;
width
:
100%
;
}
.left-box {
float
:
left
;
margin-right
:
10px
;
padding-top
:
5px
;
}
.right-box {
display
:
table-cell
;
padding
:
10px
;
border
:
1px
solid
#ccc
;
margin-right
:
10px
;
vertical-align
:
top
;
}
移动端布局因为有display:box这等属性,所以table-cell相对就排不上什么大用场,不过在移动端你要用table-cell也不是不可以,根据自己对属性的理解去使用就可以了。
0 0
- 布局神器display:table-cell
- 布局神器display:table-cell
- display:table-cell布局
- display:table-cell布局
- 布局神器 table-row table-cell
- CSS布局——display:table-cell; 与display:table;
- 列表两列布局 display:table-cell; *display:inline-block;
- display table table-cell
- display:table-cell自适应布局下连续单词字符换行
- display:table-cell
- display:table-cell总结
- display:table-cell 探究
- css3--display:table-cell
- css display table-cell
- display:table-cell应用
- bootstrap---display:table-cell
- display:table-cell
- display:table-cell的妙用
- HDU 3487 splay
- 求助!!java!! 求一个将 1维整型数组转换为字符串类型的方法!
- LoadRunner性能测试实战视频教程下载
- 2016 Multi-University Training Contest 8 1011 Rikka with Parenthesis II(模拟)
- Android资源整合
- 布局神器display:table-cell
- React Native开发环境配置
- [转载]STL学习之Vector
- 版本迭代,上传ipa时的小毛病
- git 切换分支,pull分支,提交分支
- leetcode 31. Next Permutation
- Eclipse中调节字体大小、颜色与背景色
- android 与java服务器进行RSA+AES加密通信
- 人生苦短,我用 Python