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;
}

Answer 2

你可能意识到在你的例子中，列的位置依赖于最高的列，在你的情况下，它是最后一个，

如果我必须在这样的情况下绘制一些列，我会去flex：

.container {
      width:80%;
      height:50%;
      background-color:#eee;
      padding: 30px;
      display: flex;
      align-items: flex-end;
    }

    html,body {
      height:100%;
    }

    .chart {
      background: red;
      flex: 0 0 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>

说检查浏览器支持。

Answer 3

最好的解决方案是使用vertical-align，因为@FelixAJ说。问题主要是由于导致内部文本的溢出。使用vertical-align覆盖此默认行为。另外，我建议您使用min-width而不是width来避免溢出。使用这种方法，条形的宽度将根据内部文本而增长。

div中有文本时会崩溃

3 个答案: