Question

我需要将这些div叠加在一起，但我不知道如何，是否可以这样做，还是我需要重做我的代码并使其更简单？ div，jant1和jant2将被隐藏，但它们需要在彼此的顶部，否则jant2在可见时将位于隐形jant1下面 HTML：

<div class="times">
    <div class="janT1">
        <div class="col">
            <div class="box2"><a href="img/pic.png" data-lightbox="jan1" data-title="January 1st">01:00</a></div>
        </div>
        <div class="col">
            <div class="box2"><a href="img/pic.png" data-lightbox="jan1">02:00</a></div>
        </div>
        <div class="col">
            <div class="box2"><a href="img/pic.png" data-lightbox="jan1">03:00</a></div>
        </div>
        <div class="col">
            <div class="box2"><a href="img/pic.png" data-lightbox="jan1">04:00</a></div>
        </div>
        <div class="col">
            <div class="box2"><a href="img/pic.png" data-lightbox="jan1">05:00</a></div>
        </div>
        <div class="col">
            <div class="box2"><a href="img/pic.png" data-lightbox="jan1">06:00</a></div>
        </div>
    </div>
</div>
<div class="times">
    <div class="janT2">
        <div class="col">
            <div class="box2"><a href="img/pic.png" data-lightbox="jan2"</a></div>
        </div>
        <div class="col">
            <div class="box2"><a href="img/pic.png" data-lightbox="jan2">02:00</a></div>
        </div>
        <div class="col">
            <div class="box2"><a href="img/pic.png" data-lightbox="jan2">03:00</a></div>
        </div>
        <div class="col">
            <div class="box2"><a href="img/pic.png" data-lightbox="jan2">04:00</a></div>
        </div>
        <div class="col">
            <div class="box2"><a href="img/pic.png" data-lightbox="jan2">05:00</a></div>
        </div>
        <div class="col">
            <div class="box2"><a href="img/pic.png" data-lightbox="jan2">06:00</a></div>
        </div>
    </div>
</div>

CSS：

.times {
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    padding-top:5%;
}

.janT1, .janT2 {
    position:relative;
    text-align: justify;
    min-width: 412px;
    border: 1px solid white;
    width: 99.8%; /* it changes by screen size actually */
    background-color:white;
    font-size:34px;
    object:none;
}

.janT1:after, .janT2:after {
    content: '';
    display: inline-block;
    width: 100%;
}

.col1 {
    display: inline-block;
}
.box1 {
    border: 1px solid white;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background-color:white;
}

Answer 1

绕过.times div两次，设置position: relative，然后将.jan1, .jan2样式设置为position: absolute。这将使他们在彼此之上。

此外，我添加了.hidden课程，您可以在下面的代码段中轻松隐藏每个div进行测试。

.times {
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    padding-top:5%;
    position:relative;
}

.janT1, .janT2 {
    position:absolute;
    text-align: justify;
    min-width: 412px;
    border: 1px solid white;
    width: 99.8%; /* it changes by screen size actually */
    background-color:white;
    font-size:34px;
    object:none;
}

.janT1:after, .janT2:after {
    content: '';
    display: inline-block;
    width: 100%;
}

.col1 {
    display: inline-block;
}
.box1 {
    border: 1px solid white;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background-color:white;
}

.hidden {display:none}

<div class="times">
  <div class="janT1 hidden">
    <div class="col">
        <div class="box2"><a href="img/pic.png" data-lightbox="jan1" data-title="January 1st">01:00</a></div>
    </div>
    <div class="col">
        <div class="box2"><a href="img/pic.png" data-lightbox="jan1">02:00</a></div>
    </div>
    <div class="col">
        <div class="box2"><a href="img/pic.png" data-lightbox="jan1">03:00</a></div>
    </div>
    <div class="col">
        <div class="box2"><a href="img/pic.png" data-lightbox="jan1">04:00</a></div>
    </div>
    <div class="col">
        <div class="box2"><a href="img/pic.png" data-lightbox="jan1">05:00</a></div>
    </div>
    <div class="col">
        <div class="box2"><a href="img/pic.png" data-lightbox="jan1">06:00</a></div>
    </div>
  </div>

  <div class="janT2">
    <div class="col">
        <div class="box2"><a href="img/pic.png" data-lightbox="jan2">99:99</a></div>
    </div>
    <div class="col">
        <div class="box2"><a href="img/pic.png" data-lightbox="jan2">02:00</a></div>
    </div>
    <div class="col">
        <div class="box2"><a href="img/pic.png" data-lightbox="jan2">03:00</a></div>
    </div>
    <div class="col">
        <div class="box2"><a href="img/pic.png" data-lightbox="jan2">04:00</a></div>
    </div>
    <div class="col">
        <div class="box2"><a href="img/pic.png" data-lightbox="jan2">05:00</a></div>
    </div>
    <div class="col">
        <div class="box2"><a href="img/pic.png" data-lightbox="jan2">06:00</a></div>
    </div>
  </div>
</div>

Answer 2

我不确定我是否完全理解你想要的东西。但是您的代码当前显示堆叠的janT1和janT2 div。但由于你的身高设置为100％，你必须向下滚动才能看到第二个div。如果从height:100%类中删除.times，则janT1将在janT2的正上方。

然后隐藏它你可以使用下面两个中的一个：

display:none 如果你想让div消失，页面上的其他东西都会流到它的位置。

visibility:hidden 如果您希望div不可见但仍然在页面上保留一个空白点，以便其他元素无法移动到其位置。

但是，如果你的意思是堆叠在一起，而不是彼此之上，那么你需要使用z-index属性，并确保你拥有display:inline属性。

我如何堆叠这些div？

2 个答案: