Question

我在css和html上相当新，但我尽可能多地学习。我正在为一个网站（www.revivalfest.org）制作一个简单的“启动页面”。我有一个背景div，可以通过浏览器调整大小，但是在调整浏览器大小时我的内容（视频和社交媒体图标）会移动。我希望视频以“Savannah，Ga”为中心，无论浏览器大小和屏幕分辨率如何，都要留在那里。

我已经尝试将它放在容器中以及摆弄各种div宽度和包装但没有运气。希望你们都能帮忙解决这个问题。

提前谢谢！

这是我的代码：

 <html>
 <head>
 <title>Revival Fest Coming Soon</title>
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
  <style type="text/css">
   html, body {height:100%; margin:0; padding:0;}

        #background {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0;}

          .stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

        #video {position:absolute; z-index:0; top:310; left:482;}

        #fb {position:absolute; z-index:0; top:755; left:175;}

        #twitter {position:absolute; z-index:0; top:758; left:255;}

   </style>
  </head>
  <body>
  <div id="background">
      <a href="http://www.facebook.org/revivalfestsav"><img src="http://www.revivalfest.org/wp-content/uploads/2013/06/revivalsplashmoreinfo67.jpg" class="stretch" alt="" /></a>
  </div>
  <div id="video">
        <iframe width="725" height="432" src="http://www.youtube.com/embed/kKqHnc91tzk?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
  </div>
  <div id="fb">
        <object><a href="http://www.facebook.org/revivalfestsav"><img src="http://www.revivalfest.org/wp-content/uploads/2013/06/fb.png"></a></object>
  </div>
  <div id="twitter">
        <object> <a href="https://twitter.com/savrevivalfest"><img src="http://www.revivalfest.org/wp-content/uploads/2013/06/twit.png"></a></object>
  </div>
  </body>
  </html>

Answer 1

您可以做的是使用百分比边距并使用媒体查询来定义断点。如果你真的需要背景是一个像这样的图像，否则最好的方法是使用物理文本，这样所有东西都可以相对定位。

浏览器调整大小时内容会移动

1 个答案: