Question

我有3个盒子，它们在普通桌面视口中以内联方式显示。我的问题是，当在640视口或更少的视口中时，我无法将框设置为display: block;。我已经尝试将display: block放在.box类和各个颜色ID中。盒子重叠并相互叠放会发生什么。

有人在我的尝试中看到我做错了吗？

<section id="info">
          <article>
            <a href="projects"><div id="green" class="box">
                <div class="info-box-title">PROJECTS</div>
                <div class="info-box-description">Over 60 years of accumulated projects.</div>
            </div></a>
            <a href="about"><div id="yellow" class="box">
                <div class="info-box-title">ABOUT US</div>
                <div class="info-box-description">Find out about - The Eslich Wrecking Company.</div>
            </div></a>
            <a href="contact"><div id="red" class="box">
                <div class="info-box-title">CONTACT US</div>
                <div class="info-box-description">Contact us for more information.</div>
            </div></a>
          </article>
        </section>

默认CSS

#info {
    max-width: 80%;
    height: auto;
    padding: 100px 10%;
    margin: 100px 10%;
}
.box {
    width: 20%;
    height: 300px;
    opacity:0;
    position: absolute;
    line-height: 1.5em;
}
#green, #yellow, #red {
    box-shadow: inset 0 0 0 0;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
}
#green {
    background: #3e745b;
    left: 15%;

}
#yellow {
    background: #6f9697;/*#f3db6d*/
    left: 40%;
}
#red {
    background: #3e745b;
    left: 65%;
}
#green:hover, #yellow:hover, #red:hover {
    /*box-shadow: inset 0 300px 0 0 #6f9697;*/
    box-shadow: inset 0 300px 0 0 #303030;
}
#green.green{animation:slideinGreen .5s ease}
#yellow.yellow{animation:slideinYellow 1.3s ease}
#red.red{animation:slideinRed 2s ease}
#green.active,#red.active,#yellow.active{opacity: 1}
@keyframes slideinGreen {
  from {
    left: calc(25% - 250px);opacity:0;
  }
}
@keyframes slideinYellow{
  from {
    left: calc(45% - 350px);opacity:0;
  }
}
@keyframes slideinRed {
  from {
    left: calc(65% - 450px);opacity:0;
  }
}

640px或更低的媒体查询

/*---Fade In Boxes---*/
#info {
    max-width: 100%;
    height: auto;
    padding: 100px 0%;
    margin: 0;
}
.box {
    width: 100%;
    height: 200px;
    position: absolute;
    line-height: 1.5em;
    display: block;
}
#green {
    left: 0%;
}
#yellow {
    left: 0%;
}
#red {
    left: 0%;
}

Answer 1

你对盒子类的绝对定位导致了这个问题。由于这个原因，元素彼此重叠。

Answer 2

将.box的位置更改为亲属：

@media screen and (max-width: 640px) {
 .box {
   width: 100%;
   height: 200px;
   position: relative;
   line-height: 1.5em;
   display: block;

}

由于#home-info-container有padding: 100px 15%，因此3个方框可以全宽。如果你想完全使用3个盒子，并保持描述填充：

 @media screen and (max-width: 640px) {
    #home-info-container {
      padding-left: 0;
      padding-right: 0;
    }

   #home-info-container-description {
      padding-left: 15%;
      padding-right: 15%;
   }
 }

元素不显示为块

2 个答案: