如何使块状元素中的元素等高

昨天在群里看到这样的标签组合

<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

本文版权属陈慧敏（饥人谷）所有，转载须注明出处