총수 : 디스플레이 내의 절대 인라인

Question

는 I 이런 설정 가지고

<div class="item"> 
    <img src="..."/> 
    <span class="item-detail"></span> 
    <span class="item-detail"></span> 
    <!-- ... -->  
    <span class="item-detail"></span> 
</div> 
<div class="item"><!-- ... --></div> 
<div class="item"><!-- ... --></div> 
<!-- ... --> 
<div class="item"><!-- ... --></div> 

span의 각각의 내 절대적 위치 그들의 div (position:relative을 갖는) 상기 img 내에 누워 있으므로 div 크기가 img에서 가져옵니다.

div 개를 한 줄에 표시하려고합니다. 난 그냥 div의 float:left을 가질 수 있지만,

• div의 '포함하는 요소가 그들에 의해 크기가 조정되지 않기 때문에
• 단지 선에 1-2 div들 인쇄 나는 그렇게하지 않습니다 물리적으로 인쇄했을 때

더 좋은 생각은 div에 display:inline을 사용하는 것 같았습니다. img이 아직 올바르게 정렬되어 있지만, 이제는 포함 된 span의 절대 위치가 엉망입니다. 상단이 아닌 div이 포함 된 하단에 상대적으로 배치 된 것처럼 보입니다 (적어도, 그런 일이 일어나고 있습니다). Firefox3.6에서).

무슨 일 이니? 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

display:inline-block을 사용해보세요. 그러면 요소에 대한 두 가지 특성이 모두 제공됩니다.

Answer 2

다른 상대 위치 지정 div 내부 인라인 위치 div. 이렇게하면 스팬은 상대적으로 정렬됩니다.