0

アドレスが次のように表示されるように、div レイアウトを使用してアドレスを表示しようとしています。

顧客名: ジョン・ドウ

住所行 1: 例 Street 13

住所2：

郵便番号: 90210

すべてのフィールドにデータがある限り、現在のレイアウトは正常に機能しますが、たとえば、住所行 2 の値が何もないか空の場合、郵便番号の div が住所行 2 と同じ行で上に移動するため、レイアウトが壊れます。 .

問題を説明するために JSFiddle を作成しました。JSFiddle: http://jsfiddle.net/Zwfzp/2/

CSS を機能させるには、CSS にどのような変更を加える必要がありますか?

コード：

<div class="display-label">
    Customer Name:
</div>
<div class="display-field">
    John Doe
</div>
<div class="display-label">
    Address line1:
</div>
<div class="display-field">
    Example street 13
</div>
<div class="display-label">
    Address line2:
</div>
<div class="display-field">
</div>
<div class="display-label">
    Postal code::
</div>
<div class="display-field">
    90210
</div>

CSS:

.display-label
{
    float:left;
    width: 150px;
    text-align:right;
    font-size:small;
    font-weight:bold;   

}

.display-field
{
    margin-left: 160px;
    font-size:small;
}

よろしくクリスチャン

4

5 に答える 5

2

この CSS を試してください:

.display-label
{
    float:left;
    width: 150px;
    text-align:right;
    font-size:small;
    font-weight:bold;   
    clear:both;
}

.display-field
{
    margin-left: 160px;
    font-size:small;
    float:right;
}
于 2013-07-04T21:29:55.600 に答える
0

疑似要素 :after を使用して、目に見えないスペースを追加できます。

調整された JSFiddle を確認する

.display-field:after
{
    content: '&nbsp;';
    visibility: hidden;
}
于 2013-07-04T21:50:54.780 に答える
0

CSS スタイルで両方の要素に同じ高さを指定します。

.display-label
{
float:left;
width: 150px;
text-align:right;
font-size:small;
font-weight:bold;
height: 20px;
}
.display-field
{
margin-left: 160px;
font-size:small;
height: 20px;
}
于 2013-07-04T21:34:42.730 に答える