我试图通过尝试一个投资组合来磨练我在HTML5/CSS方面的技能。 我遇到的问题是，我有3个内联块div，包装在一个容器div中，但是每当我将超过1行的文本（不管是h1和h2还是h1和p）添加到只有1个div或除1以外的所有div中时，它就会将其他内联块div向下移动。 内联块div不应该留在原来的位置吗？因为文本是该div的内部文本？ 此外，为什么它们要从它们的父/容器div中跳出？ 谢谢你的帮助！
戴维
HTML
<!DOCTYPE html>
<head>
<title>Test Div - Portfolio</title>
<link rel="stylesheet" type="text/css" href="./style/alpha.css">
<link rel="stylesheet" type="text/css" href="./style/grid-alpha.css">
</head>
<body>
<header id="logo-bar">
<a href="#"><img src="#"></a>
</header>
<div class="container"><!---
--><a href="#"><div class="maps">
<h1>Level Design</h1><p>Check out some maps!</p><p>And even cooler maps!</p>
</div></a><!---
--><a href="./sounds.html"><div class="sound">
<h1>Sounds</h1>
</div></a><!---
--><div class="proj">
<h1>Current</h1><p>Just a few notes here and there about my latest projects</p>
<p>And a few more here</p>
</div><!---
--></div>
<footer>2020 Test | <a href="#">Contact</a></footer>
</body>
</html>
CSS
/*** Fonts ***/
@font-face {
font-family: 'Maven Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/mavenpro/v20/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nejog.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
color: white;
}
body {
background-color: black;
}
header, footer {
background-color: #2d3436 !important;
}
h1, h2, h3, a, p {
font-family: "Maven Pro";
color: #dfe6e9;
}
a, a:active, a:hover, a:visited {
text-decoration: none;
color: #dfe6e9;
}
.container {
height: 85%;
width: 100%;
}
/** Div Backgrounds **/
#logo-bar {
background-color: white;
width: 100%;
height: 10%;
display: block;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.maps {
background-color: #7f8c8d;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
}
.sound {
background-color: #2980b9;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
}
.proj {
background-color: #2c3e50;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
}
.maps, .sound, .proj {
text-align:center;
}
/*** Footer***/
footer {
background-color: white/**#2c3e50**/;
font-family: "Maven Pro";
text-align: center;
font-size: 14px;
font: #95a5a6;
text-transform: uppercase;
position: absolute;
bottom: 0px;
width: 100%;
height: 5%;
vertical-align: middle;
}
嗨，你丢失了一个财产为您的孩子集装箱标签。
为每个显示元素添加Vertical-Align:Top`
让类映射，声音和proj contanier div的直接子代，如下所示
<div class="container">
<a href="#" class="maps">
<div>
<h1>Level Design</h1>
<p>Check out some maps!</p>
<p>And even cooler maps!</p>
</div>
</a>
<a href="./sounds.html" class="sound">
<div>
<h1>Sounds</h1>
</div>
</a>
<div class="proj">
<h1>Current</h1>
<p>Just a few notes here and there about my latest projects</p>
<p>And a few more here</p>
</div>
</div>
向左漂浮
.maps, .sound, .proj{
float: left;
}
对三个类重复同样的代码
使用此代码
.maps, .sound, .proj {
text-align:center;
height: 100%;
width: 33.33%;
display: inline-block;
box-sizing: border-box;
float: left;
}
.maps {
background-color: #7f8c8d;
}
.sound {
background-color: #2980b9;
}
.proj {
background-color: #2c3e50;
}
