スクロールテロップのCSSマークアップ

Question

私はスクロールティッカーが必要なダッシュボードを持っています。 （これはしばらくの間、UIがうまく動作していないかどうかはわかります）これは特定の目的のダッシュボードなので、最新のWebKitをマークアップし、実装されていれば最新のCSS3マークアップを使用することができます。

私は可能であれば比較的セマンティックそれを維持することを好むだろうが、これはいくつかの例示的なマークアップですが、私たちは、必要に応じてそれを変更することは自由です：

<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> 

は、これは私がしたいレイアウトです達成：

外側の実線はdivです。破線は、divで、ティッカー内の個々の項目を表します。アイテムは-webkit-marqueeを使用して右から左にスクロールします。ティッカーアイテムの本体はlorem ipsumテキストです。overflow-xは、マーキーの動作を引き起こすように設定されています。本体はtext-align: middleである必要があります。

問題は、上部ボックスと下部ボックスの位置を表す適切なCSSマークアップを見つけることです。私はdisplay: inlineとinline-blockのいくつかの置換を試みましたが、うまくいきませんでした。彼らはマーキーの動作を台無しにしたり、本体を動かしたりした。彼らは通常のボックスモデルから引き出される必要があるようだが、彼らはマーキーの動作を持たないので、absoluteにすることはできません。このようなケースを処理する通常のフロースペーシングを保持しないボックスモデルフローの外にある何らかの相対的位置付けがあるはずですが、私は多くのリビジョンの多くのドラフトの中でそれを見つけることはできませんCSSとGoogleの検索結果のカーゴカルトの間ではない確かに。

.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; 
} 

任意の提案：要求することで

、これが私の最後の実験の様子で私の現在の非稼働CSSのですか？

Answer 1

divのpositionをrelativeに設定して、スクロールメッセージ全体を囲む必要があります。

.message 
{ 
    position: relative; 
} 

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

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