如何给空div一个等于文本高度的最小高度?!
在此示例中,有多个标签/值对..并且某些值为空
如何为空值容器指定一个等于文本高度的最小高度?
这不是表格布局。每个标签/值都有不同的宽度
http://jsfiddle.net/p2ekqomj/9/
<div>
<div class="input_label" style="width:80px">
<div class="input_label label">Label 1</div>
<div class="input_label_value">Value 1</div>
</div>
<div class="input_label" style="width:100px">
<div class="input_label label">Label 2</div>
<div class="input_label_value"></div>
</div>
</div>
<div>
<div class="input_label" style="width:50px">
<div class="input_label label">Label 3</div>
<div class="input_label_value"></div>
</div>
</div>
<div>
<div class="input_label" style="width:60px">
<div class="input_label label">Label 4</div>
<div class="input_label_value"></div>
</div>
<div class="input_label" style="width:80px">
<div class="input_label label">Label 5</div>
<div class="input_label_value">Value 5</div>
</div>
</div>
<div>
<div class="input_label" style="width:120px">
<div class="input_label label">Label 6</div>
<div class="input_label_value"></div>
</div>
</div>
.input_label {
display:inline-block;
padding:2px;
vertical-align: top;
}
.input_label.label {
font-size:11px;
}
答案 0 :(得分:1)
将.input_label
的显示属性从inline-block
更改为table-cell
:
.input_label {
display:table-cell;
padding:2px;
}
<强> jsFiddle example 强>