CSS Spacing с Div и Float - PullRequest
Новая
       2

CSS Spacing с Div и Float

0 голосов
/ 08 марта 2012

У меня есть следующий HTML: 

<div class="count-unit">
    <div class="count-digit digit0"></div>
    <div class="count-digit digit6"></div>
</div>
<div class="count-unit">
    <div class="count-digit digit0"></div>
    <div class="count-digit digit4"></div>
</div>
<div class="count-unit">
    <div class="count-digit digit4"></div>
    <div class="count-digit digit2"></div>
</div>
<div class="count-unit">
    <div class="count-digit digit3"></div>
    <div class="count-digit digit9"></div>
</div>

К каждому «.count-digit» привязан спрайт (то есть фоновое изображение), который представляет png числовой цифры. Я пытаюсь заставить спрайты показывать горизонтально с интервалом, как это:

06 04 42 39

CSS, который я использую, выглядит следующим образом: 

     .count-unit 
     {
         margin: 0 20px 0 20px;
         padding: 0 20px 0 20px;
     }

     .count-digit { 
        background-image     : url(Images/numbers.png); 
        background-color     : transparent; 
        background-repeat    : no-repeat; 
        float: left;
     } 

     .digit0 { 
        height               : 44px; 
        width                : 30px; 
        background-position  : -0px -0px; 
     }

Показана только одна из цифр образца (".digit0"). Как можно видеть, я пытаюсь поместить интервал вокруг каждой «числовой» пары изображений с отступом или полями в содержащем элемент «count-unit». Это не работает «Float: left» на «.count-digit» игнорирует настройки полей и отступов.

Как мне это исправить? Я склонен думать, что мне нужно убить поплавки, но альтернатива «display: inline» не дает показывать спрайты.

Хуже того, хотя эти спрайты работают в IE8 и Chrome, они не отображаются, когда я включаю режим совместимости IE8. Я не уверен, о чем это. Есть идеи?

1 Ответ

0 голосов
/ 08 марта 2012

Свойство float: left не должно игнорировать поля или отступы.Я думаю, что вы должны указать плавающее значение для класса .count-unit. 

.count-unit {
    margin: ...
    padding: ...
    float: left;
}

Я пробовал здесь, и, похоже, нет никаких проблем: http://jsfiddle.net/QGZjn/1/

...