0

新しい Web サイトへの「ポータル」の背景画像があります。画像の上に、独自のパターンで配置された 5 つの画像と、リンク付きのテキストを含む 3 つの div が必要です。必要な外観の図を次に示します。ポータルのデザインへのリンク http://dansdemos.info/clips/screenshots/portal.png

ポータルはレスポンシブ デザインで実装する必要があります。

相対的な配置と絶対的な配置を試してみましたが、これらの小さなアイテムを大きなアイテムの上に配置する正しい方法がどちらかまたは両方であるかどうかを判断するのに苦労しています。そのため、画像と黄色の div を画像の上に配置する最良の方法を見つけるのに苦労しています。私の質問は、ポータルの背景画像の上に画像と div を配置する最良の方法は何ですか?

ライブ ポータルへの建設へのリンク。 http://dansdemos.info/prelaunch/WorldClothingCorp_QA/

私は何かを理解できると思いますが、これを「正しい方法」、または少なくとも良い方法で行いたいと思っています。

ありがとうございました。

4

4 に答える 4

0

Chawk が言ったように、position:relative を使用する背景画像を含む div に position:absolute を使用して、各画像を含む div を配置します。このように設定すると、5 つの画像が全画面ではなく親要素に関連して配置されます。

画像の周りの div は現在ブロックとして表示されていることに注意してください。つまり、親要素の幅全体を占めています。それらの幅を設定し、インラインブロックとして表示して、物事を簡単にすることができます。

于 2013-07-10T21:12:48.807 に答える
0

相対的に配置された div コンテナ内に背景画像を配置することをお勧めします。好みに合わせて配置したら、絶対に配置したい場合を除いて、画像を大きな画像の上に配置するために同じことを行います.

于 2013-07-10T20:57:46.920 に答える
0

HTML:

<div id="container>
   <img src="..." alt="Background Image" /> /* Big Image */
   <a href="..."><img src="..." alt="Jacket" /></a>
   <a href="..."><img src="..." alt="Skirt" /></a>
   <a href="..."><img src="..." alt="Top" /></a>
   <a href="..."><img src="..." alt="Dress" /></a>
   <a href="..."><img src="..." alt="Jacket 2" /></a>

   <a href="..." class="yellowflag">RETAIL STORE</a>
   <a href="..." class="yellowflag">WHOLESALE USED CLOTHING</a>
   <a href="..." class="yellowflag">WIPING RAGS</a>
</div>

CSS:

#container {position:relative;}
#container > img { width: 100%; }
#container img+a         {position:absolute; top:30%; left:30%;}
#container img+a+a       {position:absolute; top:50%; right:30%;}
#container img+a+a+a     {position:absolute; top:30%; right:30%;}
#container img+a+a+a+a   {position:absolute; top:30%; left:30%;}
#container img+a+a+a+a+a {position:absolute; top:80%; left:40%;}

#container .yellowflag 
{
  /* Retail Store */
  background-image: url(...); 
  position:absolute;top:...;left:...
}
#container .yellowflag+.yellowflag
{
  /* Wholesale */
  top:...;left:...;
}
#container .yellowflag+.yellowflag+.yellowflag
{
  /* Wiping rags */
  top:...;left:...;
}
于 2013-07-10T21:02:36.243 に答える