2009-07-21 4 views
31

У меня проблема с одним из моих пролетов. Пожалуйста, cosider следующие стили: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 он не «рушится».

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

Любые идеи?

+0

хммм, что вы, ребята говорят, имеет смысл, но по какой-то причине, даже после добавления дисплей: блок все еще «падает» смешно, если я добавить границу к классу колонки будет показывать правильную ширину даже если контент отсутствует. но если нет содержимого, нет границы, он просто сворачивает – chicane

+0

o yea, еще одна вещь, почему, если мои пролеты не были настроены как блоки, и если в них есть контент, тогда ширина будет настроена правильно, как в стиле лист? (не то, что я обсуждаю, соблюдаются ли ширины для встроенных элементов, им просто любопытно, почему они работали для меня) – chicane

ответ

13

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

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

+0

хорошо, плавающие элементы становятся автоматически блокирующими, объясняет многое с точки зрения поведения, которое я видел на своей странице ... Я попробовал совет nbsp, и он отлично поработал ...если кто-то, кто знает, почему ни один контент не сделает этот коллапс, может быть, они могут перезвонить, чтобы прояснить это любопытное поведение, но пока это отличное решение. – chicane

3

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

display: block; 

Для стиля.

67

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

display:block; 

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

display:inline-block; 
32

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

display: inline-block; 

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

2

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

display: block; 
float: left; 
Смежные вопросы