如何在没有固定高度的情况下将文本与div的底部对齐

Question

我稍后会提取样式。我想通过直接HTML学习如何做到这一点。

我希望选择和描述标签与绿色div的底部对齐。如您所见， vertical-align：bottom; 无效，位置：绝对; bottom：0; 将文本放在包装器div的底部。 Here is my JSFiddle。有人可以告诉我我错过了什么吗？

lv2

Answer 1

删除浮点数，改为使用display: inline-block，将三个元素放入包装器中，为其指定vertical-align: bottom，并确保不要在这三个元素之间留下空格或换行符（否则会导致不需要的空格，这又导致元素不适合它们的容器）：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

P.S。：哦，你真的应该开始不使用内联样式，而是使用外部CSS和类 - 它可以更清晰地使用。