html - 元素被推出父内容

Question

我正在尝试对齐父框内的三个框。我似乎无法确定这里的问题。当我添加 <h3></h3>在包裹的父框内标记，框被“向下”推到父框之外。这就是我的意思。

我正在尝试将所有框元素放入彩色框内。这是此内容的 HTML 部分。

.pricing {
      width: 100%;
      height: 300px;
      padding-top: 300px;
      background-color: #81F7E5;
      vertical-align: text-top
    
    }
    
    .price-box {
      width: 30%;
      height: 100%;
      margin-right: 10px;
      display: inline-block;
      background-color: #D7DAE5;
      border: black solid medium;
    }
    
    .price {
      width: 100%;
      height: 20%;
      background-color: ;
      border-bottom: black solid medium;
    }
    
    .price-box h3 {
      display: inline-block;
      color: black;
      font-size: 25px;
      margin-top: 3%;
      vertical-align: top;
    }
    
    .pricing-text {
      position: relative;
      top: -150px;
      border: solid black medium;
      display: block;
      width: 400px;
      height: 100px;
      vertical-align: top;
    }
    
    .pricing-text h3 {
      text-transform: uppercase;
      color: black;
      font-size: 2em;
      margin-top: 25px;
    }

<div class="pricing">
      <div class="pricing-text">
        <h3> Pricing </h3>
      </div>
    
      <div class="price-box">
        <div class="price">
          <h3>$9 per month</h3>
        </div>
      </div>
    
      <div class="price-box">
        <div class="price">
          <h3>$14 per month</h3>
        </div>
      </div>
    
      <div class="price-box">
        <div class="price">
          <h3>$20 per month</h3>
        </div>
      </div>
    </div>

    

我为这个冗长的问题道歉。我对前端开发还很陌生，任何建议都会帮助我成长。非常感谢。

Answer 1

抱歉，如果这是冒昧的，但您的 CSS 非常困惑。我已经清理了它并在评论中解释了我认为你出错的地方。 http://jsfiddle.net/q9xgsqh5/1/

.pricing-text {
      position: relative;
      top: -150px;

这尤其是我删除的东西，而不是依靠 html 的自然流动来适应所有内容。虽然这很好用，但有点乱。

如果您有任何问题，请告诉我。