CSS - ширина не отмечена на теге span

У меня проблема с одним из моих интервалов. Пожалуйста, объясните следующие стили:

.form_container .col1che
{
float: left; 
width: 4%; 
text-align: left;    
}

.form_container .col2che
{
float: left; 
width: 80%; 
text-align:left;
}

.form_container .col3che
{
float: right; 
width: 13%; 
text-align:right;
}

Эти 3 пробела в моем коде:

<div class="row"><!-- start: "row" -->
     <span class="col1che">        
          <?php  //some db feeds    ?>        
     </span>
     <span class="col2che">
          <?php  //some db feeds    ?>
     </span>
     <span class="col3che">
          <?php  //some db feeds    ?>
     </span>
     <div class="clear"></div>
</div><!-- end: "row" -->

Проблема возникает, когда нет данных, которые будут отображаться в "COL1CHE" (или, может быть, даже в любом из них, хотя я не уверен), когда нет данных, этот диапазон "сворачивается" и его ширина не выполняется. Это происходит в Firefox, в IE он не "рушится".

Я включил "понятный" класс, чтобы узнать, помогает ли это, но безрезультатно.

Любые идеи?

Ответы

Ответ 1

display: block не будет помочь вам здесь, потому что, когда float активирован, элементы автоматически переключаются в режим блокировки, независимо от его начального режима, поэтому ваша ширина должна работать.

Проблема может быть с пустым тегом <span>, который может не отображаться из-за некоторого неясного правила, которое я не могу запомнить. Вам следует попытаться не пустить ваш пул, возможно, добавив &nbsp;, если содержимое пуст.

Ответ 2

Span - это встроенный элемент, поэтому вы не можете установить ширину. Чтобы установить ширину, вы должны сначала установить ее на элемент блока с помощью

display:block;

После этого вы можете установить ширину. Поскольку span является встроенным встроенным элементом, вы также можете использовать встроенный блок, и он будет работать даже в IE:

display:inline-block;

Ответ 3

Ширина не выполняется, потому что span является встроенным элементом. Чтобы исправить это, добавьте:

display: inline-block;

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

Ответ 4

Чтобы сделать эту работу просто добавьте

display: block;

В стиле.

Ответ 5

Дисплей block и необязательно float left помогли мне.

display: block;
float: left;