Question

我的代码在这里：https://jsfiddle.net/yaphurt0/8/
我试图摆脱网页的其余部分，以显示必要的部分，但最终没有正确显示，我无法弄清楚为什么我的生活。无论如何，我已经删除了我能做的事情，并在css文件的注释中标出了相关的代码。

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

我已尝试overflow: auto;到#me，但这只是在内容中添加了一个滚动条，而我希望#me相应地缩放以包含其子项。这是一个非常大的问题，正如你可以从主要文本（“嗨，我是Danny ......”）中看到的那样，如果网页变得非常宽和浅，也会遇到同样的问题。

我正在寻找一个解决方案，我真的希望得到一个解释，这样我就能理解为什么网页表现得像是什么/什么使得父母规模，所以在未来我不仅仅是复制并粘贴并希望。

#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>

Answer 1

问题在于.columnInfo元素的float：left属性和#me元素的45％。如果删除它们，您会看到#me将包含所有三个.columnInfo元素，但它们将堆叠在一起。您可以在.infobody上使用display：flex使它们彼此相邻。但是，您必须为.columninfo元素提供绝对高度。

Answer 2

你可以像上面提到的那样使用flex。或者只需向infoBody添加一个清除，如下所示：

// html
<div class="infoBody clear">
//css
.clear::after {
  content: '';
  display: table;
  clear: both;
}

问题在于你.columnInfo。具有float属性的元素不再是页面正常流的一部分，因此包含的div不知道它们有多高。 clear通过在这些列下面添加一个隐藏的伪元素并强制包含div来解决这个问题。

调整父div的大小以包含子项？

2 个答案: