空div最小文本高度

时间:2015-02-11 15:10:04

标签: css

如何给空div一个等于文本高度的最小高度?!

在此示例中,有多个标签/值对..并且某些值为空

如何为空值容器指定一个等于文本高度的最小高度?

注意

这不是表格布局。每个标签/值都有不同的宽度

的jsfiddle

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

1 个答案:

答案 0 :(得分:1)

.input_label的显示属性从inline-block更改为table-cell

.input_label {
    display:table-cell;
    padding:2px;
}

<强> jsFiddle example