Question

我的主页上有不同的部分，上面有锚标记。其中一个部分包含一个全宽度的“flexslider”滑块。当我链接到主页上滑块下方的任何锚点时，从另一个页面，视口最初会转到正确的位置。但是当flexslider加载时，它会将所有东西都推下来。

我通过为flexslider容器定义固定的宽度和高度来解决这个问题，但这不是一个有效的解决方案，因为我的网站是响应式的。

任何解决方案都会非常感激，我一整天都在这里。

编辑：加价：

<div class="flexslider">
    <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    </ul>
 </div>

CSS：

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide      the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

当我为.flexslider类设置一个固定高度时，页面在滑块加载时不会偏移，但是它没有响应。我尝试使用max-height，但没有“保留”滑块的空间。

Answer 1

在您的代码中，将height和width的所有实例替换为max-height和max-width。即使在响应式网站上，也不应该将内容推出最大边界。

如果您需要更具体的帮助，请将您当前的代码编辑到您的问题中。

Answer 2

使用max-height和max-width，而不是使用固定的高度和宽度。

希望这有助于你

Answer 3

你可以通过在“slides”元素中添加两个额外的CSS行来保留空间。

首先，您必须通过图像宽度跳过高度来获得滑块的宽高比，例如：你的图像是2048x820px，比例是820/2048~0.4。

然后额外的css行是：

.flexslider .slides {
height: 0;
padding-bottom: 40%; /* if it doesn't fit exactly, try a minimal higher value, eg. 40.05%;  maybe you need to add !important too, to overwrite some previous values */
background: red; /* just for testing purposes, this line can be removed afterwards */
}

Flexslider在加载内容时按下内容

3 个答案: