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 , пользовательские агенты должны игнорировать пустые p-элементы.Поэтому не должно быть возможности стилизовать пустой p-элемент.Из спецификации:

Мы не рекомендуем авторам использовать пустые элементы P.Пользовательские агенты должны игнорировать пустые элементы P.

В вашем случае вы можете использовать элемент div или span вместо p, что позволит вам стилизовать его, даже если онпусто.

Если по какой-то причине вы все еще хотите использовать элемент p, вы можете «обмануть» браузер, добавив   в качестве содержимого, но это выглядит несколько уродливо.Я бы предпочел перейти на более подходящий тег.

Answer 2

Я не думаю, что можно определить ширину элемента блока, когда внутри нет содержимого. По крайней мере, из моего опыта в любом случае. Обычно я ставлю пробелы там, где вы можете ожидать пустое значение (еще лучше, используйте html-код для пробела:  ). Если у вас есть способ вернуть пробел, если данные ничего не возвращают - идите по этому пути, в противном случае вы можете поставить пробел в конце ваших переменных, например:

<p class="grid_3 phone-name omega"><a href="javascript:;">${firstname}, ${lastname}&nbsp;</a></p>
<p class="grid_3 alpha omega">${phonework}&nbsp;</p>
<p class="grid_3 alpha omega">${departmentName}&nbsp;</p>

Answer 3

Вы можете добавить рамку того же цвета, что и фон, хотя это действительно ужасно. Вместо числа с плавающей запятой вы также можете использовать display: inline-block, например:

.directory-phone-table .directory-phone-table-data p{
  display: inline-block;
  color: #000;
  font-size: 12px;
  width: 220px;
  overflow: hidden;  
}​

Это не будет работать в IE6, хотя

Answer 4

Вы можете использовать   вместо пустого

Answer 5

В вашем текущем примере ваш селектор CSS не нацелен на теги

в предоставленном вами HTML.Вы указали .directory-phone-table .directory-phone-table-data в своем CSS, но

находятся в directory-phone-table-row

Если вы просто используете .directory-phone-table-row p, вам будет хорошо пойти