1

見出し

注目の商品の価格の横にタグを揃える必要があります（例のタグには「AussieMade」というテキストが含まれています）。

価格の横にある「AussieMade」の画像を垂直方向に揃える必要があります（下揃え）。価格は幅と高さを動的に変えることができます。「オーストラリア製」の画像/アイコンを右側に浮かせて、divの下部に揃える方法について、誰かにアイデアを教えてもらえますか？

position:absolute; bottom:0pxAussieMadeアイコンを含むdivを付けてみまし た。しかし、それは機能しませんでした。誰かがこれについて私を助けてくれますか？

4

3 に答える 3

1

ポジションRELATIVEを使ってみましたか？PARENTコンテナと比較して？

于 2012-12-19T04:46:18.953 に答える
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 に答える
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 に答える