0

我一直试图根据另一个 div 定位一个 div，但无济于事！

我有一个响应式全屏背景网站，上面有一个名为 (logoholder) 的 div，并且在该徽标持有人中有另一个 img 持有人，它是 id-ed (logo)，它响应用户的屏幕分辨率和设备。这是通过 jquery 完成的。

在徽标持有人下，只有 3 行段落（普通文本）也是响应式的。这意味着它们将在不同的屏幕分辨率上减小/增加尺寸。这是通过javascript完成的。

现在，问题是：

当我在横向屏幕或纵向（即 iPhone、三星）上查看网站时，徽标下的文本会在徽标上重叠或以其他方式重叠。

我需要根据徽标保留文本/段落的位置！

这是我的代码：

<style type="text/css" media="screen">
html
{
  font-size:100%;
}

#logo
{
  top:30%;
  height:auto;
  left:5%;
  position:absolute;
  width:38%;
  z-index:1000;
}

#txt1
{
  top:55%;
  height:auto;
  left:5%;
  position:absolute;
  width:55%;
  z-index:1000;
  color:#FFF;
  font-size:100%;
  font-family:Verdana, Geneva, sans-serif;
  margin-top:4%;
}

#txt2
{
  top:59%;
  height:auto;
  left:5%;
  width:55%;
  z-index:1000;
  color:#cf0226;
  font-size:100%;
  font-family:Verdana, Geneva, sans-serif;
  position:absolute;
  margin-top:4%;
}

#txt3
{
  top:63%;
  height:auto;
  left:5%;
  width:55%;
  z-index:1000;
  color:#cf0226;
  font-size:100%;
  font-family:Verdana, Geneva, sans-serif;
  position:absolute;
  margin-top:4%;
}

#txt4
{
  top:22%;
  height:auto;
  left:5%;
  width:55%;
  z-index:1000;
  color:#cf0226;
  font-size:100%;
  font-family:Verdana, Geneva, sans-serif;
  position:absolute;
}

#txt5
{
  height:auto;
  width:100%;
  z-index:1000;
  color:#fff;
  font-size:4%;
  font-family:Verdana, Geneva, sans-serif;
  position:absolute;
  text-align:center;
}

#logo img
{
  width:100%;
}

body
{
  background-image:url(images/bg.jpg);
  background-repeat:repeat;
  font:16px/1.8 sans-serif;
  font-family:Verdana, Geneva, sans-serif;
  margin:0;
}

#preloader
{
  position:fixed;
  top:45%;
  left:50%;
  height:200px;
  margin-top:-45px;
  width:200px;
  margin-left:-100px;
}

h1
{
  text-align:left;
  color:#fff;
  font:16px/1 "Verdana, Geneva, sans-serif";
  display:inline-block;
  width:100%;
  font-family:Verdana, Geneva, sans-serif;
}

a:hover
{
  color:#cf0226;
  text-decoration:underline;
}

#bottom
{
  position:absolute;
  bottom:0;
  height:15px;
  width:100%;
  margin-top:40px;
  text-align:center;
}

a:link,a:visited,a:active
{
  color:#cf0226;
  text-decoration:none;
}

这是正文标签中的代码：

<div id="txt3" class="txt3">
    <h1 id="fittext3" style="font-weight:600;"><a href="#">No, I do not accept the site terms and conditions.</a></h1>
</div>
<div id="txt4">
    <h1 id="fittext4" style="font-weight:600; font-size:18px;">WELCOME TO</h1>
</div>
<div id="maximage">
    <img src="lib/images/demo/9mm_Vodka_Gun Solo_GRADED.jpg" alt="" width="1400" height="1050"/>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script>
<script src="lib/js/jquery.cycle.all.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/js/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
            $(function(){
                // Trigger maximage
                jQuery('#maximage').maximage();
            });
        </script>
<!-- DON'T USE THIS: Insert Google Analytics code here -->
<script type="text/javascript">
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-733524-1']);
          _gaq.push(['_trackPageview']);
          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();
        </script>
</div>
<script src="fittext.js"></script>
<script type="text/javascript">
      fitText(document.getElementById('fittext'), 3.5)
      fitText(document.getElementById('fittext2'), 3.6)
      fitText(document.getElementById('fittext3'), 3.6)
      fitText(document.getElementById('fittext4'), 3)
      fitText(document.getElementById('fittext5'),11.5)
    </script>
</body>
4

0 回答 0