스크롤 티커를위한 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을 사용하여 오른쪽에서 왼쪽으로 스크롤합니다. 시세 항목의 본문은 윤곽선 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으로 설정하여 전체 스크롤 메시지를 묶어야합니다. 그런 식으로, 당신은 무료로있어 절대적으로 천막 행동을 파괴하지 절대적으로하면서 메시지의 내부에 위치 요소 : 당신은 우리가 노력하지 않아도 현재 CSS를 게시하는 경우

.message 
{ 
    position: relative; 
} 

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

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