如何对齐文本格的底部没有固定高度
问题描述:
我将在稍后提取风格。我想学习如何用直线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>
答
清除花车,使用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和类来代替 - 这是更清晰的工作。
我同意你的看法完全,我将使用外部CSS和类,但是,现在,我真的想学习如何根据预定义的布局定位元素,我只是学习的div层,列,行,容器等。这是很多! : - 〜 – Patricia
我使用的确切相同的技术来垂直对齐的中间元件,但改变复选框的尺寸出现打破图案。我在这里有一个新的问题:http://*.com/q/43621013/1735836 – Patricia