与divs和浮子

我有以下HTML CSS间距：与divs和浮子

<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之间的位”是一个子画面（即背景图像），其代表数字位的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”div的每个“数字”图像对上填充或填充边距。它不工作。 “.count-digit”上的“float：left”绕过了边距和填充设置。

我该如何解决这个问题？我倾向于认为我需要杀死浮游物，但替代的“显示：内联”可以防止精灵出现。更糟糕的是，虽然这些精灵在IE8和Chrome上工作，但在打开IE8兼容模式时却没有显示出来。我不确定那是什么。有任何想法吗？

来源

2012-03-08 Brent Arias

如何做事情看，如果你使用'显示：内联block'而不是直线上升的' inline'？ – rjz 2012-03-08 02:42:56

你尝试过使用'clear：both'吗？ [this]（http://stackoverflow.com/questions/1012131/what-is-the-use-of-style-clearboth）可能有帮助 – N30 2012-03-08 03:30:09

float: left属性不应该忽略边距或填充。我认为你应该为.count-unit类指定浮动。

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

我已经在这里试了一下，似乎没有对任何问题：http://jsfiddle.net/QGZjn/1/

来源

2012-03-08 03:26:17

与divs和浮子

回答

相关问题