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>

上記では、すべてのラベル/フィールドを揃えたいのですが、フィールド値の1つがstring.emptyの場合、min-widthは機能しません。float：leftを削除すると、それも機能しません。そして、表示：インラインブロックは何もしないようで、最小幅も何もしません。

どんな助けでも大歓迎です！私はFireFoxとIEの両方を使用していますが、運がありません。

4

1 に答える 1

5

Shmiddtyのコメントをフォローアップするために、min-height：1px;を追加しました。そしてそれは魅力のように機能しました。

于 2012-12-05T21:01:32.773 に答える