Question

我正在尝试创建一个html文档，以便在iphone和ipad上显示。

这是一个简单的问题，但我对图像位置有一些问题，我不确定是否应该使用相对位置或绝对位置。

我想要的是页面中央的图像（屏幕顶部下方的一个小点）和图像下方的youtube iframe。

此代码适用于纵向但不适用于横向，因为如果页面图像不在中心。

我还想在图像和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>

Answer 1

有几种不同的技术可以将页面内容集中在一起，有些技术会在this article on 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>

在style块或附加的css样式表中添加以下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分开，并使用类链接它。您可以看到一个有效的示例on JsFiddle.Net。

HTML图像定位

1 个答案: