父元素:{display：table-row;} 子元素:｛display：table-cell;vertical-aligin:middle;｝
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#wrapper{display:table-row;}
#img-box
{
display:table-cell;
vertical-align:middle; /*垂直居中*/
text-align:center; /*水平居中*/
width:150px;
border:1px solid red;
}
#text-box
{
display:table-cell;
width:200px;
border:1px solid red;
border-left:none;
padding:10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="img-box">
<img src="images/haizei1.png" alt=""/>
</div>
<div id="text-box">
<span>《ONE PIECE》（海贼王、航海王）简称"OP"，是日本漫画家尾田荣一郎作画的少年漫画作品。在《周刊少年Jump》1997年34号开始连载。描写了拥有橡皮身体戴草帽的青年路飞，以成为"海贼王"为目标和同伴在大海展开冒险的故事。</span>
</div>
</div>
</body>
</html>
实现效果
下面这个情况也用到自适应等高，因为评论内容是动态的。
自动平均划分元素
ul中的li想要每个元素占的宽度一致，在不是用flex的情况，一般只能在一行使用li：float; 和 li 每个元素百分比。 现在可以使用父元素:{display:table;} 子元素:{display:table-cell;} 平均划分
ul
{
list-style-type:none;
display:table;
width:300px;
}
li
{
display: table-cell;
height:60px;
line-height:60px;
text-align:center;
color:White;
}
inline-block造成的元素之间的间隙
父元素:{font-size:0;}
ul{list-style-type:none; }
li{
display:inline-block;
width:60px;
height:60px;
line-height:60px;
font-size:30px;
text-align:center;
color:White;
background-color:Purple;
}
给ul增加font-size:0; 即可解决
ul{list-style-type:none; font-size:0;}
