滚动报价器的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标记

回答

相关问题