昨天在群里看到这样的标签组合
<li>
<span class="s1">fffffffffffffffff</span>
<span >fffffffffffffffffffffffffffffff</span>
</li>
.s1{
width:50px;
background:red;
display:inline-block;
}
.s2{
width:60px;
background:green;
word-break:break-all;
display:inline-block;
}
1.png
现在我的目的是用将li的空间分给span，同时span的高度相同
当然span是行内元素无法设定宽和高，所以前提是要改成block元素，
而li的高度是随着内容进行自适应的，所以只要内容的高度相同，则可满足
方法一
我第一种想法是 如果给定了span的高度，我们只要满足2个span的height的值为较高那个span的height值既可满足所需,同时现在他们的基准线为底部，我需要把基准线定义在top，这样他们高度延伸后才是我想要的东西。
.s1{
width:50px;
background:red;
display:inline-block;
height:200px;
vertical-align:top
}
.s2{
width:60px;
background:green;
word-break:break-all;
display:inline-block;
height:200px;
vertical-align:top
}
2.png
这种方法是给固定高度来实现等高，这种方法的缺陷是一旦内容超出范围，只能用overflow隐藏，元素的高度不会再变化
3.png
方法二
在table中的td的高度可以实现同行相等，宽度自适应，正好满足我们的需求，能不能使元素以单元格的样式去呈现呢
这里用到一个display:table-cell
display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用.
.s1{
width:50px;
background:red;
display:table-cell;
}
.s2{
width:60px;
background:green;
word-break:break-all;
display:table-cell;
}
这时候我们不需要给定高度，即可实现元素等高
4.png
当我们不给宽度时候也可以实现宽度自适应同时满足等高，同时达到换行的效果我需要给li一个固定的宽度，不然内容都在一样看不出效果
.s1{
background:red;
display:table-cell;
}
.s2{
background:green;
word-break:break-all;
display:table-cell;
}
li{
width:150px;
}
5.png
所以table-cell在满足等高的时候还可以满足宽度自适应
以上都是自己所想所写，如果想看关于table-cell的更详细的介绍http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html
本文版权属陈慧敏（饥人谷）所有，转载须注明出处
