内联块 div 和多行文本答案

【问题标题】：Inline-block divs and multiple lines of text内联块 div 和多行文本
【发布时间】：2020-06-27 12:41:18
【问题描述】：

我正在尝试通过一个作品集来磨练我在 html5/css 方面的技能。我遇到的问题是，我有 3 个内联块 div，包装在一个容器 div 中，但是每当我将超过 1 行的文本（无论是 h1 和 h2 还是 h1 和 p）添加到只有 1 个 div 或除1，它将其他内联块 div 向下移动。由于文本在该 div 内部，因此内联块 div 不应该留在原处吗？此外，他们为什么要突破其父/容器 div？感谢您的帮助！

大卫

HTML

<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 赋予inline-block div

标签： html css containers

【解决方案1】：

您好，您的子容器标签缺少一个属性。

为每个带有显示的元素添加vertical-align: top`

【讨论】：

【解决方案2】：

让类映射、声音和投影容器 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;
}

【讨论】：

很好地抓住了不重复相同的代码，但是向左浮动而不是垂直对齐顶部有什么好处？