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

Answer 2

這是不可能的float:left（除非你事先知道確切的高度，並且可以根據其設定的margin-top）。但是，浮動從來沒有打算做這種類型的佈局。

但是，它可以用easyly做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-）的後備，它們將提供體面的體驗（比沒有更好）。