如何将 2 个标签与底部对齐对齐。如果一个标签有多行,则其旁边的标签将从顶部显示。我可以将它对齐到底部吗?
<div class="field">
<div class="label">labl 1:</div>
<div class="value">Some text</div>
<br />
<br />
</div>
<div class="field">
<div class="label">this is a really really long label:</div>
<div class="value">right after":" from previous label</div>
<br />
</div>
.label {
background: purple;
float: left;
width: 100px;
display: inline;
vertical-align: 500px;
}
.value {
background: red;
width: 300px;
float: right;
}
非常感谢:)
最佳答案
这里有一些选项供您选择:
使用
display:inline-block
:.label { background: purple; width: 100px; display: inline-block; } .value { background: red; width: 300px; display: inline-block; vertical-align: bottom; }
使用
display:table
和table-cell
.field { display: table; } .label,.value{ display: table-cell; } .label { background: purple; min-width: 100px; } .value { background: red; width: 100%; vertical-align: bottom; }
使用
position:absolute
.field { position: relative; } .label { background: purple; width: 100px; } .value { background: red; width: 300px; position: absolute; right: 0; bottom: 0; }
注意:前两个选项在 IE < 8 中不起作用(没有一些 hack)
关于CSS 多行标签对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18778259/