div 오른쪽에 위치하는 스팬 요소

Question

다음 html은 항목 정보를 표시합니다. 나는 등급 div의 오른쪽에 평균화 범위를 넣으려고합니다. 등급을 왼쪽으로 띄우면 다른 범위의 맨 위로 이동합니다. 쉽게 해결할 수있는 문제이지만, 더티 코드를 피하는 해결책을 찾지 않고 많은 노력을했습니다.

   <div> 
        <h1>name</h1> 
        <span>omg: <a href="#">omg</a></span> 
        <div class="rating"> 
         <span class="stars-2"> 
          <img src="stars.png" width="86" height="91" title="4 star rating" alt="4 star rating" /> 
         </span> 
        </div> 
        <span>x avaliations</span> 
       </div> 

평가의 CSS :

 div.rating { 
      position: relative; 
      width: 84px; 
      height: 14px; 
      overflow: hidden; 
     } 

     div.rating span { 
      position: absolute; 
      left: -1px; 
     } 

     div.rating span.stars-0 { 
      top: -1px; 
     } 

     div.rating span.stars-1 { 
      top: -16px; 
     } 

     div.rating span.stars-2 { 
      top: -31px; 
     } 

     div.rating span.stars-3 { 
      top: -46px; 
     } 

     div.rating span.stars-4 { 
      top: -61px; 
     } 

     div.rating span.stars-5 { 
      top: -76px; 
     } 

Answer 1

는 평가 div과 aviliations span에 style="float:left;"를 추가합니다. (더 나은 아직 : 이러한 요소에 대한 CSS 파일에 float:left;을 추가하십시오).

그런 다음 div과 span 사이에 <br clear="all" /> 앞에 넣으십시오.

Answer 2

그냥 평가 사업부

div.rating { 
     position: relative; 
     display:inline; /* add this */ 
     width: 84px; 
     height: 14px; 
     overflow: hidden; 
    } 

여기

+는 http://jsfiddle.net/j5mxZ/에 맞게 갈 수있는 더 스타일에 display:inline를 추가 - 편집없이 스타일링 http://jsfiddle.net/j5mxZ/1/

Answer 3

은 HTML의 스팬의 순서를 변경해보십시오 :

<div> 
    <h1>name</h1> 
    <span>omg: <a href="#">omg</a></span> 
    <span>x avaliations</span> 
    <div class="rating"> 
     <span class="stars-2"> 
      <img src="stars.png" width="86" height="91" title="4 star rating" alt="4 star rating" /> 
     </span> 
    </div> 
</div>