Как бы я складывал эти divs?

Question

Мне нужно собрать эти 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

Wrap .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 divs. Но поскольку ваш рост установлен на 100%, вам нужно прокрутить вниз, чтобы увидеть второй div. Если вы удалите height:100% из класса .times, janT1 будет правым на стороне janT2.

А потом, чтобы скрыть его, вы можете использовать один из двух ниже:

display:none если вы хотите ДИВ исчезнуть, и все остальное на странице, чтобы течь в месте.

visibility:hidden Если вы хотите, чтобы div не был виден, но все еще сохранял пустое место на странице, чтобы другие элементы не могли переместиться в его положение.

Однако, если вы имели в виду, что они располагались друг с другом, а не друг над другом, то вам нужно будет использовать свойство z-index и убедитесь, что у вас есть свойство display:inline.