cssTable布局:table布局
布局1:高度固定,左边宽度固定,右边自适应
<style>
.content-wrap {
display: table;
height: 100px;
width: 100%;
}
.content-left {
display: table-cell;
width: 300px;
background: red;
}
.content-right {
display: table-cell;
background: yellow;
text-align: center;
vertical-align: middle;
}
</style>
<div class = "content-wrap">
<div class = "content-left"></div>
<div class = "content-right">
<h1>利用table进行布局</h1>
<p>高度固定,左边宽度固定,右边自适应</p>
</div>
</div>
同理,我们可以右边宽度固定,左边自适应。
布局2: 高度固定,左右宽度固定,中间自适应
<style>
.content-wrap {
display: table;
height: 100px;
width: 100%;
}
.content-left {
display: table-cell;
width: 300px;
background: red;
}
.content-center {
display: table-cell;
text-align: center;
vertical-align: middle;
background: green;
}
.content-right {
display: table-cell;
background: yellow;
width: 300px;
}
</style>
<div class = "content-wrap">
<div class = "content-left"></div>
<div class = "content-center">
<h1>利用table进行布局</h1>
<p>高度固定,左右宽度固定,中间自适应</p>
</div>
<div class = "content-right"></div>
</div>
布局3:宽度固定,上下高度固定,中间自适应
<style>
.content-wrap {
display: table;
height: 100%;
width: 300px;
}
.content-top {
display: table-row;
height: 100px;
}
.content-center {
display: table-row;
}
.content-bottom {
display: table-row;
height: 100px;
}
.item {
display: table-cell;
background: red;
}
.center-item {
display: table-cell;
background: green;
text-align: center;
vertical-align: middle;
}
</style>
<div class = "content-wrap">
<div class = "content-top">
<div class = "item" ></div>
</div>
<div class = "content-center">
<div class = "center-item">
<h1>利用table进行布局</h1>
<p>高度固定,左右宽度固定,中间自适应</p>
</div>
</div>
<div class = "content-bottom">
<div class = "item" ></div>
</div>
</div>
table布局有点老,但是依然有用武之地,当你用flex不好处理的时候,可以试试table布局。
下面内容来自上面的博客原文。
table标签(display:table)
1) table可设置宽高、margin、border、padding等属性。属性值的单位可以使用px,百分比值。
2) table的宽度默认由内容的宽高撑开,如果table设置了宽度,宽度默认被它里面的td平均分,如果给某一个td设置宽度,那么table剩余的宽度会被其他的td平均分(有点类似flex布局)
3) 给table设置的高度起到的作用只是min-height的作用,当内容的高度高于设置的高度时,table的高度会被撑高。
tr标签(display:table-row)
1) 给tr设置高度只起到min-height的作用,默认会平分table的高度。
2) tr中的td默认高度会继承tr的高度,若给任一td设置了高度,其他td的高度也同样变高。适合多列等高布局
3) 设置宽度、margin、都不起作用
td标签(display:table-cell)
1) td默认继承tr的高度,且平分table的宽度
2) 若table(display:table)不存在,给td设置的宽高不能用百分比只能用准确的数值
3) 给td设置vertical-align: middle; td元素里面(除float、position:absolute)所有的块级、非块级元素都会相对于td垂直居中
4) 给td设置text-align: center; td元素里面所有非block元素(除float、position:absolute)都会相对于td水平居中,虽然block元素不居中,但其中的文字或inline元素会水平居中
总结:
使用table-cell还可以实现很多的布局,需要自己去发挥想象。总结下来也就需要记住几点,设置了display:table-cell的元素具有以下特性。
- text-align、vertical-align等对齐属性起作用,margin不起作用。宽高百分比值不起作用。
- 会生成虚拟的table、tr把自己包裹住,如果有相邻的兄弟元素也被设置了table-cell,则会跟兄弟元素一起生成虚拟的table、tr把自己包裹住,并一行等高显示
- 多个table-cell元素会占满被设置了display: table的元素的宽度,如果一个元素被设置了宽度,那么其他剩余的table-cell元素会占满剩下的宽度。当然,如果只有一个table-cell元素,就算设置了宽度也会占满table元素的宽度。
- 对设置了float、absolute的元素不起作用。且IE6、7不支持