Question

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

客户名称：John Doe

地址第1行：示例街道13

地址第2行：

邮政编码：90210

我的当前布局工作正常，只要我在每个字段中都有数据，但是如果例如地址行2的值没有/空则布局会中断，因为邮政编码的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

试试这个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来附加不可见的空格。

See your adjusted JSFiddle

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

Answer 5

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

防止div填补空白空间？

5 个答案: