我有这个:
我希望它是这样的:
http://i53.tinypic.com/2u7rf48.png
所有这些都是彼此垂直对齐的,“新闻”位于中间,右侧是星星,左侧是3个图像。
我该怎么做?帮助我卡住..
答案 0 :(得分:4)
我强烈建议打破html中的所有样式并将其放在外部样式表中。
答案 1 :(得分:1)
我设法这样做了。改变你的CSS:
.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;
}
然后你的HTML也是:
<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>