我需要在特色产品的价格旁边对齐标签(示例中的标签包含“Aussie Made”文字)。
我需要在价格旁边垂直对齐“Aussie Made”图像(底部对齐)。价格可以在宽度和高度上动态变化。有人可以给我一些关于如何使“澳大利亚制造”的图像/图标浮动在右边但仍然在div底部对齐的想法吗?
我试着把
包含Aussie Made图标的div上的 position:absolute;
bottom:0px
。但它没有用。有人可以帮我这个吗?
答案 0 :(得分:1)
您尝试使用RELATIVE位置吗? 与PARENT容器相关?
答案 1 :(得分:0)
这应该给你一个想法:
CSS
.container{position:relative; height:200px; width: 200px; outline: 1px solid #000; }
.image { position: absolute; bottom:0px; right:0px; width: 10px; height: 10px; outline: 1px solid #000; }
HTML
<div class="container"><div class="image"></div></div>
答案 2 :(得分:0)
见下图。
和代码......
<style type="text/css">
.Main
{
position: absolute;
left: 400px;
top: 200px;
width: 469px;
height: 280px;
}
.Photo
{
width: 469px;
height: 280px;
z-index: 1;
}
.Caption
{
position: absolute;
left: 0px;
top: 250px;
width: 461px;
height:32px;
padding-left: 8px;
background-color: #FF0000;
color: #FFFFFF;
font-family: tahoma;
font-size: 20pt;
text-align: left;
vertical-align: middle;
z-index: 2;
}
.Price
{
position: absolute;
left: 330px;
top: 215px;
width: 122px;
height: 40px;
text-align: center;
vertical-align: middle;
z-index: 3;
color: #CC3300;
font-size: 20pt;
background-color: #FFFF00;
}
.MiniText
{
top: 4px;
color: #111111;
font-size: 8pt;
font-weight: bold;
font-family: Tahoma;
}
</style>
<div style="left: 0px; top: 0px; height: 800px;">
<div class="Main">
<img class="Photo" alt="" src="http://202.92.83.79/medias/sys_master/images/8796157247518/Package-img1.jpg" />
<div class="Price" style="z-index: 4">
<div class="MiniText">First of it's kind!</div>
£100.97p
</div>
<div class="Caption" style="z-index: 3">Sooper Dooper Wotsit Thingy</div>
</div>
</div>