2011-02-07 4 views
2

임이 갖는CSS :이 권리를 정렬

http://jsfiddle.net/h2rsJ/2/

을 그리고 난 그것을 같이 할 것을 권장합니다

모두가 서로 수직으로 정렬되도록하는 것이 enter image description here http://i53.tinypic.com/2u7rf48.png

, 중간에 '뉴스'가 있고 오른쪽에 별이 있고 왼쪽에 3 개의 이미지가 있습니다.

어떻게 할 수 있습니까? 메신저 붙어 도와 .. 내가 강하게 HTML에서 스타일링을 모두 파괴하고, 외부 스타일 시트에 넣어 권하고 싶습니다

답변

1

나는 이렇게 할 수 있었다. 당신의 HTML이 너무 다음

.iconFavorite{ 
background: url(http://www.penrithstar.com.au/images/icon_star.gif) no-repeat; 
width: 16px; 
height: 16px; 
border: none; 
display:inline-block; 

} 

#discoLEvents{ 
    display: inline-block; width: 200px; border-left: 1px solid #666; border-right: 1px solid #666; text-align: center; height: 40px; } 

p{ 
    line-height: 40px; display: block; float: left; text-align: center; width: 200px; border-left: 1px solid #666; border-right: 1px solid #666; text-align: center; 
} 

img{ 
    float: left; 
} 

#stars{ 
    float: right; line-height: 40px; 
} 

을 그리고 : 당신의 CSS를 변경

<div id="discoActions" style="border: 1px solid red;"> 
<img style="width: 40px; height: 40px;" src="http://media.dkbn.dk/Storage/Discos/7829f6d8-a9ee-4e6d-bdf8-e225d91be8f8/Banners/633861096606933426.jpg"> 
<img style="width: 40px; height: 40px;" src="http://media.dkbn.dk/Storage/Discos/7829f6d8-a9ee-4e6d-bdf8-e225d91be8f8/Banners/633861096606933426.jpg"> 
<img style="width: 40px; height: 40px;" src="http://media.dkbn.dk/Storage/Discos/7829f6d8-a9ee-4e6d-bdf8-e225d91be8f8/Banners/633861096606933426.jpg"> 
<p>NEWS</p> 

<div id="stars"> 
<div class="iconFavorite"></div> 
<div class="iconFavorite"></div> 
<div class="iconFavorite"></div> 
<div class="iconFavorite"></div> 
<div class="iconFavorite"></div> 
</div> 
</div>