html - Float Div 在没有内容时保持其宽度

Question

我有 3 <p>具有设置的宽度，但有时我内部不会有内容，但我需要它们保持宽度，即使 <p> 内没有内容。

<div class="grid_12 alpha omega directory-phone-table-row">
        <p class="grid_3 phone-name omega"><a href="javascript:;">${firstname}, ${lastname}</a></p>
        <p class="grid_3 alpha omega">${phonework}</p>
        <p class="grid_3 alpha omega">${departmentName}</p>
    </div>

.directory-phone-table .directory-phone-table-data p{
    color: #000;
    font-size: 12px;
    float: left;
    width: 220px;
    overflow: hidden;   
}

Answer 1

根据W3C spec ，用户代理应该忽略空的 p 元素。因此，不可能为空的 p 元素设置样式。从规范来看:

We discourage authors from using empty P elements. User agents should ignore empty P elements.

在您的情况下，您可以使用 div 或 span 元素而不是 p，这将允许您对其进行样式设置，即使它是空的。

如果您出于某种原因仍然想使用 p 元素，您可以通过添加   作为内容来“欺骗”浏览器，但这似乎是一个有点丑陋的解决方案。我更愿意切换到更合适的标签。