與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和浮子

回答

相關問題