CSS - 根据内容改变高度

Question

我有 3 个框，我需要根据内容更改高度，但高度必须更改为向上(下边距对齐)。这是图像的外观:

<style>
  .wrapper{
    width: 100%;
    height: 30px;
  }

  .wrapper .point{
    width: 12px;
    height: 12px;
    background: #979797;
    -moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-radius: 70px;
    float: left;
    margin-top: 3px;
  }

  .wrapper .text{
    width: 130px;
    float: left;
    border-bottom: 2px solid #979797;
    color: #979797;
    font-size: 11px;
    min-height: 20px;
    text-align: center;
    padding-bottom: 20px;
    margin-top: -12px;
  }
</style>


<div class="wrapper">
  <div class="point"></div>
  <div class="text">Short</div>
  <div class="point"></div>
  <div class="text">Short</div>
  <div class="point"></div>
  <div class="text">Very long text. Lorem ipsum dolor sit amet</div>
  <div class="point"></div>
</div>

怎么做？谢谢

Answer 1

尝试

height:auto,
width:100%

在你的 CSS 中