2012-05-03 9 views
0

У меня есть 3 внутренних divs все плавающие влево. Они распаковываются в родительском div, который равен ширине 100%. У меня есть мой первый внутренний div, установленный на определенную ширину, тогда мой следующий будет установлен, чтобы повторить x фон, и правый рядом с ним.внутренний div не соответствует ширине родителя

Внутри них нет контента, который будет содержать фоновые спрайты. Итак, у вас есть левый div, центральный div и правый div. Центр будет плиткой, а внешние - нет. Проблема в том, что мне нужна определенная ширина, иначе фон не отображается. Есть ли способ получить центр, чтобы показать. Я пробовал ширину 100%, но ничего не сделал. Единственный способ заставить его работать - установить отображение родителя в таблицу. А затем внутренние к таблице. Но это не поддерживается в IE7.

  <div id="subNav"> 
       <div class="subNav-left"></div> 
       <div class="subNav-middle"></div> 
       <div class="subNav-right"></div> 
      </div> 
+1

Не могли бы вы включить некоторую разметку? – kinakuta

+1

Зачем должен отображаться фон (цвет или изображение), когда HEIGHT из div равен 0px? Помните, что у вас есть ЧТО-ТО внутри div (даже  ) ИЛИ установите высоту, чтобы она была больше, чем 0px tall ... – Minja

ответ

1

Я понимаю, что вы хотите показать жидкий фон. Первый div показывает левую часть полосы, третья - последнюю, а средняя повторяет фон, чтобы она могла быть текучей. Для того, чтобы добиться того, что без дополнительного кодирования, просто присвоить повторяющийся фон для основной DIV, и всплывают два внутренних див, с их происхождениями:

<div id="subNav"> 
    <div class="subNav-left"></div> 
    <div class="subNav-right"></div> 
    <div class="clear"></div> 
</div> 

И CSS:

<style> 
#subNav{ 
    background: url(repeating_bk.png) top left repeat-x; 
    width:100%; 
} 
.subNav-left{ 
    width: 50px; /* specified */ 
    height: 20px; /* specified */ 
    background: url(left.png) top left no-repeat; 
    float:left; 
} 
.subNav-right{ 
    width: 50px; /* specified */ 
    height: 20px; /* specified */ 
    background: url(right.png) top right no-repeat; 
    float:right; 
} 
.clear { clear:both; } 
</style> 

Надеется, что это помогает.

Смежные вопросы