再探display:table-cell &&左边固定、右边自适应
display:table-cell;这个属性用的不多，它和td差不多，但是如果可以用好还是能收益不少的，下面举例说明。
1. 父元素display:table-cell，并设置verticle-align:middle; 那么无论子元素是块级元素还是行内元素都可以做到垂直居中。
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
*{
margin:0;
padding:0;
}
.father{
height: 500px;
width: 500px;
/*position: relative;*/
display: table-cell;
/*text-align: center;*/
vertical-align: middle;
background-color: #ccc;
}
.son{
width: 200px;
/*float: right;*/
/*position: relative;*/
/*position: absolute;*/
height: 200px;
vertical-align: middle;
background-color: red;
display:table-cell;
}
/* span{
position: absolute;
top:50%;
transform: translate(0,-50%);
}*/
</style>
</head>
<body>
<div class="father">
<div class="son"> <span>这是一段文字</span></div>
</div>
</body>
</html>
2. 即使父元素是display:table-cell,我们也不能给其设置text-align：center， 这个特点和块级元素时非常相似了。
3. 如果父元素设置为table-cell后，给其添加position:relative;属性，因为没有脱离文档流，所以没有影响，但是如果添加了position:absolute和position:fixed以及float属性，那么就会脱离文档流，这样即使设置了vertical-align:middle，其子元素也不能居中了，因为一旦一个元素添加了使其脱离文档流的属性，它就被破坏了，这是我们需要注意的地方。
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
*{
margin:0;
padding:0;
}
.father{
height: 500px;
width: 500px;
/*position: relative;*/
position: absolute;
display: table-cell;
/*text-align: center;*/
vertical-align: middle;
background-color: #ccc;
}
.son{
width: 200px;
/*float: right;*/
/*position: relative;*/
/*position: absolute;*/
height: 200px;
vertical-align: middle;
background-color: red;
display:table-cell;
}
/* span{
position: absolute;
top:50%;
transform: translate(0,-50%);
}*/
</style>
</head>
<body>
<div class="father">
<div class="son"> <span>这是一段文字</span></div>
</div>
</body>
</html>
3. display：table-cell 的元素具有inline-block的特性，但也不全是。
1.给一个元素设置为table-cell，不设置width和height，如：
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
*{
margin:0;
padding:0;
}
div{
display: table-cell;
background-color: #ccc;
}
</style>
</head>
<body>
<div>这是一段文字</div>
</body>
</html>
这时可以发现效果如下：
2. 但是我们又可以通过使用table-cell完成一个左边固定，右边自适应的布局，这时他的宽度就自适应了，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
*{
margin:0;
padding:0;
}
.father{
display: table;
width: 100%;
/* 注意：display:table;其width必须要设置，否则不会100% */
background-color: #ccc;
}
.left{
display: table-cell;
width: 300px;
height: 500px;
background-color: blue;
}
.right{
display: table-cell;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
补充：实现这种布局的方法还有：将子元素设置为固定的，并且float或者是position:absolute,这样就脱离文档流了，然后右边的div默认为auto， 再给右边的div一个margin-left即可。
浙公网安备 33010602011771号