我的代码在这里:https://jsfiddle.net/yaphurt0/8/
我试图摆脱网页的其余部分,只显示必要的部分,但最终显示不正确,并且我无法弄清楚为什么会导致我的一生。
无论如何,我已经精简了一切,并在css文件的注释中标记了相关代码。

我的问题是我试图在页面底部彼此相邻显示3个框。随着窗口的缩小,我使用媒体查询来增加框的宽度,因此每行有2个,如果窗口进一步缩小,则为1个。当然,这意味着这些盒子在垂直方向上会占据更多的空间,这意味着它们会溢出,因为父div不会随其缩放。

我尝试了overflow: auto;#me,但是这只是向内容添加了一个滚动条,而我希望#me进行相应缩放以包含其子级。正如您从正文(“嗨,我是丹尼...”)中所看到的那样,这是一个困扰我的大问题,如果将网页制作得很宽很浅,也会遇到同样的问题。

在寻找解决方案的过程中,我真的很希望得到一个解释,这样我就可以理解为什么网页按其原样运行/是什么使父级缩放,所以将来我不只是复制并粘贴和希望。



#me {
  width: 100%;
  height: 45%;
  background-color: white;
}

#me .container {
  width: 60%;
  height: 100%;
  margin: 0 auto;
}

#me .container .introduction {
  height: 30%;
  margin-bottom: 5%;
}

#me .container .introduction .title,
.subInfo {
  width: 80%;
  color: #262626;
  text-align: center;
  margin: 0 auto;
  border-bottom: 2px solid orange;
}

#me .container .introduction .title {
  font-family: 'Unica One', cursive;
  text-transform: uppercase;
  font-size: 4vw;
}

#me .container .introduction .subInfo {
  text-align: center;
  font-family: 'Unica One', cursive;
  text-transform: uppercase;
  font-size: 2vw;
}

#me .container .infoBody {
  width: 100%;
  height: 50%;
  min-height: 75px;
  margin: 0 auto;
}

#me .container .infoBody .columnInfo {
  float: left;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 31.5%;
  margin: 2px;
  background-color: orange;
  border: 2px solid #e8eaed;
  border-radius: 5px;
}

@media only screen and (min-width: 500px) and (max-width: 1000px) {
  .minimalHeading {
    font-size: 5.5vw;
  }
  #me .container .infoBody .columnInfo {
    width: 48.5%;
    margin: 0 auto;
  }
  .minimalHeading .contactMe a {
    font-size: 4vw;
  }
}

@media only screen and (max-width: 500px) {
  .minimalHeading {
    font-size: 7.5vw;
  }
  #me .container .infoBody .columnInfo {
    width: 90%;
    margin: 0 auto;
  }
  .minimalHeading .contactMe a {
    font-size: 5vw;
  }
}

<div id="me">
  <div class="container">
    <div class="introduction">
      <p class="title">My Skillset</p>
      <p class="subInfo">The standard Web-development stuff</p>
    </div>
    <div class="infoBody">
      <div class="columnInfo">Hi</div>
      <div class="columnInfo">There</div>
      <div class="columnInfo">You!</div>
    </div>
  </div>
</div>

最佳答案

问题出在.columnInfo元素的float:left属性和height:#me元素的45%中。如果删除这些元素,则会看到#me将包含所有三个.columnInfo元素,但它们将堆叠在一起。您可以在.infobody上使用display:flex使它们彼此环绕。但是,您将必须为.columninfo元素赋予绝对高度。

10-05 20:59
查看更多