html - 当其中有文本时，div 会折叠

Question

我在折叠 div 时遇到问题。 当我添加一些文本时，它会从父 div 折叠。 这是HTML代码

    .container {
      width:80%;
      height:50%;
      background-color:#eee;
      padding: 30px
    }

    html,body {
      height:100%;
    }

    .chart {
      background: red;
      width: 30px;
      margin-right: 10px;
      display: inline-block;
    }

    <div class="container">
       <div class="chart" style="height: 10%"></div>
       <div class="chart" style="height: 20%"></div>
       <div class="chart" style="height: 70%">test</div>
       <div class="chart" style="height: 100%"></div>
    </div>

和演示:http://jsfiddle.net/5YukJ/485/

Answer 1

使用vertical-align: bottom;

.chart {
    background: red;
    width: 20px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: bottom;
}