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

float:left是不可能的（除非事先知道确切的高度，否则可以根据它设置margin-top）。但是花车从来都不是为了做这种布局。

但是，使用Flexbox可以轻松完成：

.wrapper{
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
}

.wrapper .point{
    width: 12px;
    height: 12px;
    background: #979797;
    border-radius: 70px;
    display: inline-block;
    margin-top: 3px;
}

.wrapper .text{
    width: 90px;
border-bottom: 2px solid #979797;
color: #979797;
font-size: 11px;
text-align: center;
padding: 20px;
background: #eee;
}

<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. Lorem ipsum dolor sit amet</div>
  <div class="point"></div>
</div>

此外，通过将vertical-align:bottom设置为其容器，可以使用内联块来完成此操作。您可以将其添加为Flexbox解决方案的后备广告（您只需将vertical-align:bottom设置为.wrapper并将display:inline-block设置为点和文本）。我不建议仅依赖内联块，因为它们不是用于布局，如浮点数，并且需要某种黑客来调整项之间的空间，因为它们将标记之间的空白字符视为空白文本字符。但作为支持非支持Flexbox的浏览器（如IE10-）的后备，他们将提供一个体面的体验（比没有更好）。