用于滚动滚动条的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标记来描述Upper Box和Lower Box的位置。我尝试了display: inline和inline-block的几个不起作用的排列。他们要么破坏了大帐篷的行为，要么将主体移动过来。它们似乎需要从正常的盒子模型中拉出来，但不能是absolute，因为它们不会有选取框行为。似乎应该存在某种类型的相对定位，这种相对定位在盒子模型流程之外，不能保持正常的流动间距来处理这样的情况，但是我没有在许多修订版的许多修订中找到它。 CSS当然也不属于谷歌搜索结果的货币崇拜。

根据要求，这是我目前在上一次实验状态下的非工作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;
}

有什么建议吗？

Answer 1

您应将整个滚动消息包裹在div中，并将position设置为relative。这样，您可以绝对地将元素绝对放置在消息内，同时不会破坏选取框行为：

.message
{
    position: relative;
}

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

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