<div id="container">
  <div style="display:inline-block;">
  </div>
  <div style="display:inline-block;">
  </div>
  <div style="display:inline-block;">
  </div>
</div>

如果我将容器设置为relative,则将内部div设置为absolute&底部：0,然后它们都重叠.它们在没有绝对定位的情况下很好地流动,但条形图是颠倒的.

注意：我的意图是保留条形的内联流,而不必明确指定水平位置.

这是问题的一个更好的例子.

http://jsfiddle.net/benstenson/NvvV6/1/

1) correct orientation but vertical alignment is top
<div id="no-content" class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>
 
2) wrong orientation,vertical alignment top
<div id="has-content" class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</div>
 
3) mixed orientation,alignment is crazy
<div id="mixed" class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c"></div>
</div>
 
4) correct orientation and correct alignment but<br/>
flow has been lost and horizontal position must be explicit
<div id="absolute" class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c"></div>
</div>
 
5) here we go!
<table class="container">
    <tr>
        <td><div class="a">a</div></td>
        <td><div class="b">b</div></td>
        <td><div class="c"></div></td>
    </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

body {padding:1em;font-family:sans-serif;font-size:small;}
.container {
    height:2.5em;width:50%;margin-bottom:1em;
    background-color:lightgray;
    font-size:larger;
    font-weight:bold;
    text-transform:Uppercase;
}
div.container > div {
    width:32%;
    display:inline-block;
    background-color:black;
    color:cyan;
}
 
#absolute { position:relative;}
#absolute > div {position:absolute;bottom:0px;opacity:.3;}
 
.a {height:50%;}
.b {height:60%}
.c {height:80%;}
 
td{width:33.333%;vertical-align:bottom;}
td > div{​background-color:black;​color:cyan;}​

那么有没有更好的方法来实现这一点,比如使用webkit flexBox或者什么？