Question

所以这是我的罪魁祸首网站：http://imranahmed.io/

出于某种原因，我无法让“关于我”<div>直接显示在我的flickity slider下方 - 而“关于我”页面与滑块重叠，滑块会消失在背景中。

以下是一个显示“关于我”页面的示例：

我已经尝试将旋转木马的css设置为display:inside-block，但这没有任何区别，所以我对如何继续进行操作感到非常困惑。这是我的代码：

HTML：

--- 
layout: default 
title: index 
permalink: / 
---

<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/static/js/flickity.pkgd.min.js"></script>
<link href="/static/css/flickity.css" rel="stylesheet" media="screen">
<script type="text/javascript">
    $(document).ready(function() {
        $('.flickity-slider').flickity({
            cellAlign: 'left',
            contain: true,
            autoPlay: true,
            pageDots: false,
            pauseAutoPlayOnHover: false
        });
        $(".nav navbar-nav navbar-right").addClass("active");
    });
</script>

<div class="navbar-wrapper">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                <a class="navbar-brand" href="#page-top" id="i18_title"><span data-i18n="website.title">{{ site.title }}</span></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right" id="i18_navbar">
                    {% for section in site.data.landing %}
                    <li>
                        <a class="page-scroll" href="#{{ section.id }}">
                            <span data-i18n="{{ section.i18n }}">{{ section.name }}</span>
                        </a>
                    </li>
                    {% endfor %}

                </ul>
            </div>
        </div>
    </nav>
</div>

<div class="flickity-slider">
    {% for slider in site.data.slider %}
    <div class="carousel-cell"><img class="carousel-image" src="{{ slider.img | prepend: site.baseurl }}" alt=""></div>
    {% endfor %}
</div>

<div>
{% for section in site.data.landing %}
    {% assign loopindex = forloop.index | modulo: 2 %}
    <section id="{{ section.id }}" class="features {% if loopindex != 1 %} gray-section {% endif %} {{ section.css }}" style="margin-top: 0px;">
        {% include sections/{{section.tpl}} %}
    </section>
{% endfor %}
</div>

about.html页面是另一个名为“container”

的div类

这是相应的CSS：

.landing-page .flickity-slider{
    height: 30%;
}
.landing-page .carousel-cell{
    width: 100%; /* full width */
    height: 470px; /* height of carousel */
    max-height: 470px;
    max-width: 100%;
    margin-right: 10px;
    display: inline-block;
    position: relative;

}
.landing-page .carousel-image{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%
    max-height: 30%
    object-fit: contain;
}

我对CSS很新，所以我不太清楚我做错了什么 - 非常感谢帮助和建议！

谢谢！

Answer 1

使用position:absolute删除div上的class=flickity-slider，然后关注我＆＃34;关于我＆＃34; div将＆＃34;清除＆＃34;正确。

more info：

关于绝对的权衡，也是最重要的事情要记住定位是将这些元素从流动中移除页面上的元素。具有这种定位的元素不是受其他元素影响，不会影响其他元素。这个每次使用绝对时都要考虑一件严肃的事情定位。它的过度使用或不当使用会限制其灵活性你的网站。

Answer 2

更改此部分代码

<div class="flickity-slider">
{% for slider in site.data.slider %}
<div class="carousel-cell"><img class="carousel-image" src="{{ slider.img | prepend: site.baseurl }}" alt=""></div>
{% endfor %}

到

<div class="carousel">
    {% for slider in site.data.slider %}
    <div class="carousel-cell"><img class="carousel-image" src="{{ slider.img | prepend: site.baseurl }}" alt=""></div>
    {% endfor %}
</div>

flickity-slider班级是＆＃34;内部＆＃34;具有一些默认样式的flickity类。这就是为什么关于我的部分位于flickity滑块顶部的原因。

请记住，您还必须在JS代码中更改类

<script type="text/javascript">
$(document).ready(function() {
    $('.carousel').flickity({
        cellAlign: 'left',
        contain: true,
        autoPlay: true,
        pageDots: false,
        pauseAutoPlayOnHover: false
    });
    $(".nav navbar-nav navbar-right").addClass("active");
});

以防万一，如果你想要定义轮播的高度，你可以像官方文档中的例子那样做：http://flickity.metafizzy.co/options.html#setgallerysize

无法让Flickity滑块出现在两个div之间

2 个答案: