在底部div的CSS問題

Question

我有一個div在我的頁面底部。它的CSS是：

#news-bottom { 
color: white; 
position: fixed; 
white-space: nowrap; 
overflow: hidden; 
height: 66px; 
bottom: 0; 
right: 390px; 
left: 180px; 
padding: 5px; 
border: 1px solid #CCC; 
background-color: black; 
} 

和我有div的內容，如在圖像上： 內容的HTML：

<span> 
    <span><b>Teste</b></span> 
    <span>Teste com BBCodes</span> 
    <img style="border: 1px solid #CCC; padding:2px; margin-left: -3px;" src="images/news/empty.png"> 
</span> 

如何使我的div的內容顯示出來是這樣的：

我不能使用換行符或表格，因爲div的位置是固定的，現在我不知道該怎麼辦......

Answer 1

像this JSFiddle應該工作。

我們所做的是將background-color應用於容器div的孩子。然後，我們給他們一些padding，它們之間創造了空間。瞧！

HTML：

<div id="news-bottom"> 
    <span> 
    <span><b>Teste</b></span> 
    <span>Teste com BBCodes</span> 
    <img style="border: 1px solid #CCC; padding:2px; margin-left: -3px;" src="images/news/empty.png"> 
</span> 

CSS：

#news-bottom { 
    color: white; 
    position: fixed; 
    white-space: nowrap; 
    overflow: hidden; 
    height: 66px; 
    bottom: 0; 
    right: 390px; 
    left: 180px; 
    padding: 5px; 
    border: 1px solid #CCC; 
} 
#news-bottom span span, 
#news-bottom span img { 
    background-color: black; 
    padding: 5px; 
}​​ 

Answer 2

如果你想固定的位置，你可以多次申報單及其left屬性更改爲你喜歡什麼。您可以使用%定位，以便在不同的分辨率下看起來幾乎相同。

但是，我建議在固定的容器中使用float<div>，並結合@jmeas建議的margin s。事情是這樣的：

HTML

<div class='container'> 
    <div class='arrow'></div> 
    <div class='item'>One</div> 
    <div class='item'>Two</div> 
    <div class='item'>Three</div> 
    <div class='arrow'></div> 
</div> 

CSS

#container { 
    ...fixed... 
} 

.arrow { 
    float:left; 
    width:10%; 
} 

.item { 
    float:left; 
    margin-left:5px; 
    width:20%; 
}