html - 在 h2 元素下对齐 p 元素

Question

目前将 CSS 触及到登录页面。如何让我的 p 元素在我的 h2 元素下方对齐？就像我希望它看起来像：

这是我的样子：

这是 CodePen的链接。

提前致谢。

* {
  font-family: Arial;
}

@media (max-width: 768px) {
  * {
  font-family: Tahoma;}
}

#header {
  position: fixed;
  width: 100%;
  display: flex;
  top: 0;
  background-color: white;
  opacity: 0.8;
}
#header img {
  height: 75px;
  width: 75px;
  margin-top: -10px;
}
#header h1 {
  font-size: 23px;
  margin-left: -20px;
}
#header nav {
  margin-left: 730px;
  margin-top: 15px;
}
#header a {
  color: black;
  text-decoration: none;
}
.nav-link {
  margin-right: 10px;
}

#glove {
  margin-top: 100px;
  margin-left: 50px;
}
.glove-feature {
  display: flex;
  flex-direction: row;
}
.glove-feature img {
  height: 100px;
  width; 100px;
}
.description {
  padding: 5px;
  margin-top: -10px;
  margin-bottom: 15px;
}

#features {
  margin-top: 50px;
}
#features h2 {
  text-align: center;
}
#features iframe{
  display: block;
  margin: 0 auto;
}

#pricing {
  margin-top: 100px;
  text-align: center;
  border: 1px dashed black;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
#pricing h3 {
  font-weight: normal;
}
#pricing p {
  font-style: italic;
}

#close {
  margin-top: 50px;
  text-align: center;
  font-size: 20px;
}
input[type=submit] {
  background-color: #DBBC58;
  border-radius: 6px;
}

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div id=header>
    <img src="http://www.free-icons-download.net/images/lightning-bolt-logo-icon-76715.png" alt="Lightning" id="header-img">
  <h1>Lightning-Fast Muay Thai Gloves</h1>
<nav id="nav-bar">
<a href="#glove" class="nav-link">Why this glove?</a>
<a href="#features" class="nav-link">Features</a>
<a href="#pricing" class="nav-link">Pricing</a>
  </nav>
</div>

  <div id="glove">
  <div id="leather" class="glove-feature">
    <img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
  <div class="description">
    <h2>Authentic Leather</h2>
  <p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p> 
    </div>
</div>
    <div id="science" class="glove-feature">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img"> 
      <div class="description">
  <h2>Aerodynamically Tested</h2>
  <p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
    </div>
    </div>
    <div id="sewing" class="glove-feature">
  <img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
      <div class="description">
  <h2>Hand-made</h2> 
  <p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p> 
      </div>
    </div>
  </div>

<div id="features"> 
  <h2>In-Depth Look</h2>
  <iframe id="video" width="600" height="400" src="https://www.youtube.com/embed/xo2xuNYKO0I" frameborder="0" allowfullscreen></iframe>
</div>

<div id="pricing">
  <h2>Pricing</h2>
  <h3>$49.99</h3>
  <p>And if it doesn't last you 36 months...we'll give you a full refund.</p>
</div>

<div id="close">
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    Take your bouts to the next level: <br>
    <input id="email" type="email" placeholder="Email" name="email"><br>
    <input id="submit" type="submit">
  </form>
</div>

标签： htmlcss

Answer 1

您需要在您的 s 和sdiv周围添加一个额外的内容才能在父级内部正确格式化它们。我将您的 CSS 和 HTML 简化为最小的正确示例，还选择使用类而不是 CSS 选择器的 ID 来删除重复的样式：h2pflex

* {
  font-family: Arial;
}

.glove-feature {
  display: flex;
  flex-direction: row;
}

.glove-feature img {
  height: 150px;
  width: 150px;
}

.description {
  padding: 10px;
}

<div id="glove">
  <div id="leather" class="glove-feature">
    <img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
    <div class="description">
  <h2>Authentic Leather</h2>
  <p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p>
    </div>
    </div>
    <div id="science" class="glove-feature">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img">
      <div class="description">
  <h2>Aerodynamically Tested</h2>
  <p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
      </div>
    </div>
    <div id="sewing" class="glove-feature">
  <img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
  <div class="description">
  <h2>Hand-made</h2> 
  <p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p>
      </div>
</div>