html - 防止div填充空白空间？

Question

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

客户姓名：John Doe

地址行 1：示例 Street 13

地址行 2：

邮政编码：90210

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

我制作了一个 JSFiddle 来说明这个问题。JSFiddle：http: //jsfiddle.net/Zwfzp/2/

我应该对 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;
}   

最好的问候克里斯蒂安

Answer 1

试试这个 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 2

浮动.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 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 来附加一个不可见的空间。

查看调整后的 JSFiddle

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

Answer 5

使用 PHP 或 JavaScript 检查需要在输出时删除的空字段。