Html 防止div填充空白空间？

我正在尝试使用div布局显示地址，以便地址显示如下：

客户名称：John Doe

地址行1：示例街13

地址行2：

邮政编码：90210

只要每个字段中都有数据，我当前的布局就可以正常工作，但例如，如果地址行2的值为nothing/empty，则布局会中断，因为邮政编码的div在地址行2的同一行上移

我已经做了一个JSFiddle来说明这个问题。 JSFiddle：

为了使CSS正常工作，我应该对其进行哪些更改

代码：

致意 Christian

试试这个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;
}   

---

将

显示标签

和

显示字段

浮动到左侧，

浮动：左侧和添加
清除：左侧至
。显示标签
。我从
.display字段中删除了边距，并添加了一些填充

清除：左
将阻止所有div排列在一行中，并将其向下推到前面的div下方

这里是一个更新的小提琴：

CSS

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

您可以使用pseudo-element:after来附加不可见的空间


使用PHP或JavaScript检查输出时需要删除的空字段。
如果数据为空，我会创建一个HTML帮助程序，它根本不会输出
div
。我想可以使用

标记。非常感谢您的回复。成功了！我想最大的问题是，当定义了20px的高度时，为什么它会起作用？因为线的高度相等！当Div中没有字符且仅填充空格（！）时，Div的高度与填充可见字符时不同。通过这种方式，我们强制div在两种情况下具有相同的高度。非常感谢您的回复。这是我所能看到的最佳解决方案。非常感谢您的回复。但是，这会将值放置在最右侧，我正在寻找一种解决方案，其中值放置在靠近标签的位置。（对不起，我忘了在我的问题中说明）
.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;
}   

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

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

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