1

标题

我需要在特色产品的价格旁边对齐标签（示例中的标签具有文本“Aussie Made”）。

我需要垂直对齐价格旁边的“澳大利亚制造”图像（底部对齐）。价格可以动态改变宽度和高度。有人可以给我一些关于如何使“澳大利亚制造”图像/图标浮动在右侧并且仍然在 div 底部对齐的想法吗？

我试图放在 position:absolute; bottom:0px包含澳大利亚制造图标的 div 上。然而它没有用。有人可以帮我吗？

4

3 回答 3

1

您是否尝试使用位置相对？相对于 PARENT 容器？

于 2012-12-19T04:46:18.953 回答
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>
于 2012-12-19T05:42:02.233 回答
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>

于 2012-12-19T05:06:53.750 回答