1

iPhoneとiPadに表示されるHTMLドキュメントを作成しようとしています。

単純なものですが、画像の位置に問題があり、相対位置と絶対位置のどちらを使用すべきかわかりません。

私が欲しいのは、ページの中央にある画像（画面の上部にある小さなビット）と、画像の中央にあるyoutubeiframeです。

このコードは縦向きでは機能しますが、ページの場合は画像が中央に表示されないため、横向きでは機能しません。

また、画像とYouTubeフレームの間にスペースを確保したいと思います。これは私の実際のコードです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<meta content="width=device-width;" initial-scale="1.0;" maximum-scale="2.0;" name="viewport" user-scalable="1;" />
<body bgcolor="#9fa2b5">
   <div align="center">
      <img style="position:relative; TOP:15px; LEFT:65px; "src="http://mysite.jpg" alt="image is missing"  width=90 height=130>
      <p>
      </p>

      <iframe  width="320" height="180" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
   </div>
</body>
</html>
4

1 に答える 1

1

ページコンテンツを中央に配置するためのいくつかの異なる手法があり、いくつかはw3.orgのこの記事で説明されています。alignの属性を使用しておりdiv、機能するはずです。ただし、画像タグには、画像を中央の右側にleft:65px;移動するものも追加します。65px

純粋なcssソリューションでは、htmlに対して次のことを行う必要があります。

<div class="container">
    <img class="rndImage" src="http://myimage.org" alt="image is missing"/>
    <iframe class="youtube" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
</div>

そして、次のCSSをstyleブロックまたは添付のcssスタイルシートに追加します。

iframe.youtube
{
    width:320px;
    height:180px;
    display:block;
    margin:15px auto;
}

img.rndImage
{
    display:block;
    width:90px;
    height:130px;
    margin:15px auto;
}

div.container
{
   position:relative;
   width:100%;
   margin:5px, auto;
}

上記のコードは、スタイルをhtmlから分離し、クラスを使用してリンクします。JsFiddle.Netで実際の例を見ることができます。

于 2012-12-17T17:18:27.620 に答える