Question

我使用的旋转木马插件都没有正常工作。通常我需要在所有内容正确显示之前调整浏览器的大小。这是不实际的，因为我的是一个移动应用程序。

我已经把问题钉在了定位上。页面之间的过渡要求定位为绝对（参见#page > div）。但是，旋转木马需要相对定位。

我尝试在旋转木马周围添加一个额外的<div></div>并将其定位为相对的，但它没有做到这一点。任何人都知道如何解决这个问题......

Transition.css：

#page {
  position: relative;
}

#page > div {
  display:none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#page > div.current {
    display: block;
}

HTML：

<!doctype html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="cleartype" content="on">
  <link rel="stylesheet" href="css/transition.css?v=1">
  <link rel="stylesheet" href="css/elastislide.css?v=1">
</head>

<body>
<div id="page">  

<div id="pageLogin" class="pageLogin current">
    <a href="#pageSearch" id="signIn" class="button small brown"><span>Sign in</span></a>
</div>


<div id="pageSearch" class="pageSearch">
    <!-- Elastislide Carousel -->
    <div id="carousel" class="es-carousel-wrapper">
    <div class="es-carousel">
    <ul>
        <li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
        <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
        <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
        <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
        <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
    </ul>
    </div>
    </div>
    <!-- End Elastislide Carousel -->
</div> <!--! end #pageSearch-->
</div><!--end #Page-->

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.elastislide.js"></script>
</body>
</html>

Answer 1

我找到了问题的答案。它实际上是应用于页面的display:none和display:block。

显示块导致旋转木马的图像显示块样式而不是并排显示。

我使用display:none，visibility:hidden，height: 0而不是overflow: hidden。然后我在页面显示时反转它。

Answer 2

我也解决了这个问题。

我在文档加载后使用了一些jQuery来应用css。

例如：

jQuery(document).ready(function($){
$('.more-wrapper').css({"display": "block", "position": "absolute", "left": "50%", "z-index": "100", "bottom": "40px", "-webkit-transform": "translate(-50%,0)", "-ms-transform": "translate(-50%,0)", "-o-transform": "translate(-50%,0)", "transform": "translate(-50%,0)"});
});

位置：绝对导致我的旋转木马出现故障

2 个答案: