防止div填補空白空間？

Question

我試着使用DIV佈局，顯示地址，使該地址將顯示是這樣的：

客戶名稱：李四

地址1號線：例街13

地址行2 ：

郵編：90210

我目前的佈局工作得很好，只要我有數據在各個領域，但如果一個例子地址線的值2是什麼/ EM pty然後佈局中斷，因爲郵政編碼的div在地址線2的同一行上移動。

我已經做了一個JSFiddle來說明問題。 JSFiddle：http://jsfiddle.net/Zwfzp/2/

爲了使它工作，我應該對CSS做些什麼改變？

CODE：

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

問候 基督教

Answer 1

浮動兩個.display-label和.display-field到左邊，float: left;並且添加clear: left;到.display-label。我從.display-field刪除了保證金並添加了一些填充。

clear: left;將阻止所有的div排成一行，並將它壓低到它之前的div下面。

這裏是更新的小提琴：http://jsfiddle.net/Zwfzp/4/

CSS

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

} 

.display-field 
{ 
    float: left; 
    font-size:small; 
    padding-left: 10px; 
} 

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

Answer 3

指定上的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; 
} 

Answer 4

您可以使用僞元素：after添加不可見空間。

See your adjusted JSFiddle

.display-field:after 
{ 
    content: ' '; 
    visibility: hidden; 
} 

Answer 5

使用PHP或JavaScript來檢查需要加以輸出取出空字段。