Question

非常常见的问题，通常围绕当前的情况展开，所以在阅读了大量不同的解决方案并尝试将它们放入其中之后，我想我只是根据自己的情况自问这个古老的问题。

情况

我使用jQuery构建了一个小页面滑块，它似乎按预期工作，然后我注意到CSS高度仍设置为我用于测试的默认值。移除它后，我似乎无法让父母的高度打开到不同孩子的高度。我知道将不同div的位置设置为relative而不是absolute将显示它们，但是div不再正确定位（位于彼此之下）。我发现的其他解决方案都围绕着不使用甚至是我自己常见的标记。

问题

是否有一个CSS修复程序允许我按照我设置的方式利用Bootstrap，以及我已经编写过的jQuery动画？或者他们是否有任何建议可以使这项工作没有对标记进行太多改动？我尝试了几种不同的变化，这似乎是最稳定的。

代码

我已将其添加到jsFiddle。由于某种原因，我无法让动画在小提琴中工作（在我的笔记本电脑上适用于所有浏览器），但默认布局应该足以看出父母如何不尊重子元素。 / p>

<style>
.container {
    margin-top: 50px;
}
.row {
    margin-bottom: 20px;
}
.windowBox {
    overflow: hidden;
}
.box {
    background-color: #FFF;
    position: absolute;
    width: 100%;
}
.page1 {
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 999; /* set to be over page2 onload */
}
.page2 {
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 99; /* set to be under page1 onload */
}
</style>

<div class="container">

    <div class="row">
        <div class="col-sm-12">Header text should be above either page.</div>
    </div>

    <div class="row">
        <div class="text-center">
            <button type="button" id="showPage1" class="btn btn-danger" disabled>Page 1</button>
            <button type="button" id="showPage2" class="btn btn-primary">Page 2</button>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12 windowBox">
            <div class="row">
                <div class="box page1">
                    <div class="hidden-xs col-sm-6">...</div>
                    <div class="col-sm-6">...</div>
                </div>
                <div class="box page2">
                    <div class="col-sm-12">...</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">Footer text should be under either page.</div>
    </div>
</div>

Answer 1

DEMO

在标记中添加了.over类。这是那里唯一的改变。

<强> CSS Over class是windowBox的容器我们希望它有一个隐藏的溢出，因为它将并排包含我们所有的页面。

.over {
    overflow: hidden;
}

遗憾的是，这是一个固定值。基本上它是你的窗口X页面的宽度。如果您要添加更多只有一个页面，可以在JavaScript中设置此值。

.windowBox {
    width: 220vw;
}

然后我们简单地将容器设置为“一种”固定宽度响应宽度..所以95的视口宽度是合理的。

.box {
    background-color: #FFF;
    width: 95vw;
    display: inline-block;
    float: left;
}

在JavaScript中设置left而不是设置margin-left属性您只需要为第一个元素执行此操作。如果要滚动到第4页，可以将第一页边距设置为-4 * 95vw

父容器不尊重儿童身高

1 个答案: