Question

我正在尝试显示一些“对齐”文本 - 我决定使用6列布局，但它不是真正的列布局，因为每行可以有一个单元格（如表格中）多列。但是，我只是这样做。

我的CSS如下所示，只要有内容，它就可以正常工作。但是，如果没有内容，则会失败。请帮忙！

.p_row { 宽度：900px; padding-top：0px; 清楚：左; }

    .p_col1 { min-width: 140px; }
    .p_col2 { min-width: 280px; }
    .p_col3 { min-width: 420px; }
    .p_col4 { min-width: 560px; }
    .p_col5 { min-width: 700px; }
    .p_col6 { min-width: 840px; }


    .labeldesc {
        display: inline-block; 
        float: left;
        text-align: left; 
        vertical-align: top; 
        margin-right: 0px; 
    }

    .field {
        display: inline;  
        float: left;
        text-align: left; 
        vertical-align: top; 
        margin-right: 0px; 
    }

示例数据：

<div class="Row Container">
    <div class="p_row">
        <div class="p_col1 labeldesc">Condition:</div>
        <div class="p_col1 field">@clinicalCondition.Description</div>
        <div class="p_col1 labeldesc">Is Chronic:</div>
        <div class="p_col1 field">@clinicalCondition.ChronicIndicatorString</div>
        <div class="p_col1 labeldesc">Date</div>
        <div class="p_col1 field">@clinicalCondition.DateString</div>
    </div>

    <div class="p_row">
        <div class="p_col1 labeldesc">Comment:</div>
        <div class="p_col5 field">@clinicalCondition.Comments</div>
    </div>
</div>

在上面，我想要所有标签/字段对齐，但如果其中一个字段值是string.empty，则min-width不起作用。如果我删除浮动：左，它也不起作用。显示：内联块似乎没有做任何事情，最小宽度也没有。

任何帮助将不胜感激！我正在使用FireFox和IE，但没有运气。

Answer 1

为了跟进Shmiddty的评论，我增加了一个最小高度：1px;它就像一个魅力。

如何在空div上强制min-width

1 个答案: