3

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

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

.p_row { 宽度：900px; 填充顶部：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，则最小宽度不起作用。如果我删除浮动：左，它也不起作用。并且 display: inline-block 似乎没有做任何事情，最小宽度也没有。

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

4

1 回答 1

5

为了跟进 Shmiddty 的评论，我添加了一个 min-height: 1px; 它就像一个魅力。

于 2012-12-05T21:01:32.773 回答