我的代码在这里: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
元素赋予绝对高度。