html - 元素未显示为 block

Question

我有 3 个框，它们在普通桌面视口(viewport)中以内联方式显示。我的问题是在 640 或更小的视口(viewport)中，我无法将框显示到 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

您在框类上的绝对定位导致了问题。因此，这些元素相互重叠。