CSS-разметка для прокрутки

Question

У меня есть приборная панель, на которой я хотел бы прокрутить тикер.(Мы узнаем, является ли пользовательский интерфейс отстойным или нет, если он некоторое время работал на стене.) Поскольку это инструментальная панель специального назначения, мы можем использовать недавний 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.

По запросу это мой текущий нерабочий 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;
}