滾動報價器的CSS標記

我有一個儀表板，我想要一個滾動報價器。（一旦它在牆上運行了一段時間，我們就會知道UI是否被吸住）。因爲這是一個特定的目的儀表板，所以我們可以在我們的標記中假設一個最近的WebKit，並且如果它被實現的話，甚至可以使用最新的CSS3標記。滾動報價器的CSS標記

這是一些示範性的標記，但我們可以自由地修改它，因爲需要，但我更願意保持相對語義如果可能的話：

<div class="ticker"> 
    <div class="itemDiv"> 
    <img src="x"> 
    <div class="itemBodyDiv"> 
     <span>Upper Box</span> 
     <span>Lorem ipsum dolor sit amet</span> 
     <span>Lower Box has longer text</span> 
    </div> 
    </div> 
</div>

這是我想要的佈局達成： wireframe layout of ideal ticker markup

外部實心黑線是div。虛線是div，表示股票行情中的單個項目。項目將使用-webkit-marquee從右向左滾動。自動收報機項目的主體是lorem ipsum文本，需要設置overflow-x以導致選框行爲。主體應該是text-align: middle。

我遇到的問題是要找到合適的CSS標記來描述上框和下框的位置。我已經嘗試了display: inline和inline-block的幾個排列組合，但沒有成功。他們要麼破壞了馬戲團的行爲，要麼將主體移開。看起來他們需要被拉出正常的盒子模型，但不能是absolute，因爲他們沒有選取框的行爲。似乎應該有某種相對定位不在盒子模型流程中，它不能保持正常的流動間距來處理像這樣的情況，但是我沒有在許多版本的草稿中發現它。 CSS並且絕對不是Google搜索結果的貨物崇拜。

通過要求，這是我最後的實驗的狀態我現在不工作的CSS：

.itemDiv { 
    display: inline; 
    vertical-align: middle; 
} 

.itemDiv > img { 
    margin: 10px 10px 10px 30px; 
    vertical-align: middle; 
    height: 48px; 
    width: 48px; 
/* border: 1px solid red; */ 
} 

.itemBodyDiv { 
    display: inline; 
    vertical-align: middle; 
} 

.itemDiv span:nth-child(1) { 
    font-size: small; 
    clear:left; 
    vertical-align: top; 
    color: green; 
} 

.itemDiv span:nth-child(2) { 
    font-size: x-large; 
    vertical-align: middle; 
    color: white; 
} 

.itemDiv span:nth-child(3) { 
    font-size: smaller; 
    vertical-align: bottom; 
    color: gray; 
}

有什麼建議？

來源

2011-01-08 ohmantics

這將會是冷靜，如果你發佈你的CSS的，所以我們不必去嘗試在我們修補時重現它。 – Hemlock 2011-01-08 02:27:13

您應該將整個滾動消息包裝在div中，其position設置爲relative。這樣的話，你可以自由地絕對定位元素內絕對不會同時打破了選取框行爲的消息：

.message 
{ 
    position: relative; 
} 

.upper-box 
{ 
    position: absolute; 
    top: 5px; 
    left: 10px; 
} 

.lower-box 
{ 
    position: absolute; 
    bottom: 5px; 
    left: 10px; 
}

來源

2011-01-08 02:29:18 Jacob

你是一個紳士和學者！ – ohmantics 2011-01-08 02:46:47

滾動報價器的CSS標記

回答

相關問題