如何对齐文本格的底部没有固定高度

Question

我将在稍后提取风格。我想学习如何用直线HTML做到这一点。

我想要选择和说明标签要与绿色div的底部对齐。正如你所看到的，vertical-align：bottom;没有工作和的位置是：绝对的;底部：0;将文本放在包装div的底部。 Here is my JSFiddle。有人能告诉我我错过了什么吗？

<div id="wrapper" style="width: 80%; height: 100%; overflow:hidden; margin: 0 auto; float: left"> 
    <div class="row" style="width: 100%; height: 80%; margin: 0 0 0 0; float: left; background-color: aqua;"> 
    <div id="heading" class="row"> 
     <p style="text-align: center;">This is a title</p> 
     <div style="width: 15%; float: left; background-color: yellow;"> 
     <label style="vertical-align: bottom; position: absolute; bottom: 0;">Select</label> 
     </div> 
     <div style="width: 70%; float: left; background-color: orange;"> 
     <label style="vertical-align: bottom; ">Description</label> 
     </div> 
     <div style="width: 15%; float: left; background-color:green;"> 
     <label style="vertical-align: bottom; ">Number of items available for a very long title</label> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

清除花车，使用display: inline-block相反，把三个元素的包装，分配vertical-align: bottom到并确保不留下这三个要素之间的空格或换行符（否则导致不希望的空白，这再次导致元件其容器内不适合）：

<div id="wrapper" style="width: 80%; height: 100%; overflow:hidden; margin: 0 auto; float: left"> 
 
    <div class="row" style="width: 100%; height: 80%; margin: 0 0 0 0; float: left; background-color: aqua;"> 
 
    <div id="heading" class="row"> 
 
     <p style="text-align: center;">This is a title</p> 
 
    </div> 
 
    <div class="wrap1" style="vertical-align: bottom;"> 
 
     <div style="width: 15%; background-color: yellow; display: inline-block;"> 
 
     <label style="vertical-align: bottom; ">Select</label> 
 
     </div><div style="width: 70%; background-color: orange; display: inline-block;"> 
 
     <label style="vertical-align: bottom; ">Description</label> 
 
     </div><div style="width: 15%; background-color:green; display: inline-block;"> 
 
     <label style="vertical-align: bottom; ">Number of items available for a very long title</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/2hxt8x1f/1/

P.S：哦，你真的应该开始不使用内联样式，但使用外部CSS和类来代替 - 这是更清晰的工作。