学习了旭哥的文章总结
等分
<style>
.container {
display: table;
height: 300px;
width: 100%;
border: 1px solid red;
}
.child {
display: table-cell;
border: 1px solid red;
}
</style>
<body>
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
</body>
效果
等高布局
<style>
.list_row {
display: table-row;
}
.list_cell {
display: table-cell;
width: 30%;
padding: 1.6%;
background-color: #f5f5f5;
}
/*中间一个元素背景淡蓝,有别于两边的淡灰色*/
.list_center {
background-color: #f0f3f9;
}
</style>
<body>
<div class="list_row">
<div class="list_cell">对于不支持display:table-cell属性的IE6/7浏览器,又当如何解决呢?
我们可以使用“补差等高法”,就是一个一个很大的margin-bottom负值配上一个同样大小的padding-bottom值,本例中为了实例需要,margin-bottom值就百来像素。显然,由于两者原理不同,难免需要用到hack,所以demo完整CSS代码如下:
</div>
<div class="list_cell list_center">对于不支持display:table-cell属性的IE6/7浏览器,又当如何解决呢?</div>
<div class="list_cell ">对于不支持display:table-cell属性的IE6/7浏览器,又当如何解决呢?</div>
</div>
</body>
效果
多行文字居中
<style>
.parent {
display: table;
height: 300px;
width: 1000px;
border: 1px solid red;
}
.child {
display: table-cell;
/* 类似于表格中的单元格 */
/* 使元素的中部与父元素的基线加上父元素x-height(译注:x高度)的一半对齐。 */
vertical-align: middle;
}
</style>
<body>
<div class="parent">
<div class="child">
假如我现在有一个div,高度固定,里面有一段文本,差不多跟上面的第二个差不多,但是不知道到底有多少行。如果用第二种方法,并且文本超过了一行,那肯定超出父元素了,如图
</div>
</div>
</body>
左右布局
<style>
.box {
width: 60%;
margin: 60px auto 0;
padding: 20px;
background: #f5f5f5;
}
p {
margin: 0;
}
a img {
width: 100px;
margin-right: 10px;
float: left;
}
.content {
display: table-cell;
/* *display: inline-block; */
}
</style>
<body>
<div class="box f9 fix">
<a class="l mr10"><img src="./images/1.jpg" /></a>
<div class="content">
<p><a></a>大美女一枚</a> 来自上海</p>
<p class="mt5">签名:想找个保鲜盒把你给我的那些感动都装起来。当你让我伤心的时候就拿出来回味一下。</p>
<p class="mt5">
微博:坐在办公室,只听轰隆隆几声巨响,晴天也能打雷吗?原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了,也不清下场,把路过的汽车震得灰头土脸,愣在路中央不知如何是好。其次,房子只炸了一半,另一半屹立不倒,是乍药太水还是房子质量太好?
</p>
</div>
</div>
注意:设置display: table-cell;后消除BFC同时,不会像inline-block和absolute效果一样
图片居中
<style>
ul {
list-style: none;
}
.zxx_align_box_4 div {
background-color: red;
display: table-cell;
width: 144px;
height: 144px;
line-height: 1.14;
text-align: center;
vertical-align: middle;
}
.zxx_align_box_4 div img {
height: 134px;
vertical-align: middle;
}
</style>
<body>
<ul class="zxx_align_box_4 fix">
<div><img src="./images/1.jpg" /></div>
</ul>
</body>
效果