html - 用于显示div顶部内容的css

Question

我想显示所有div的内容应该从开始。现在我有一个显示异常的文本问题。检查代码片段，我想显示标题1和标题2应该从顶部开始。但是标题 1 从顶部出现，标题 2 从下方开始。

.wraper {
  
  border-style: solid;
  border-width: 2px;
  border-color: red;
  text-align: center;
}
.boxer {
  width: 25%;
  height: 175px;
  padding: 10px 10px 0 10px;
  display: inline-block;
  text-align: left;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="wraper">
  <div class="boxer b1">
    <h2>Heading 1</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.Donec id elit non mi porta gravida at eget metus.  Donec sed odio dui</p>
  </div>
  <!--end of emp div -->
  <div class="boxer b2">
    <h2>Heading 2</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
  </div>
  <!--end of cli div -->
  <div class="boxer b3">
    <h2>Heading 3</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
  </div>
  <!--end of doc div -->
   
</div>
<!--end of box div -->

编辑标题 1 的内容并查看变化。我想从 div 标记的顶部显示它。

Answer 1

将 vertical-align:top; 赋予 .boxer 并移除静态高度(height: 175px;)将解决您的问题。

因为默认情况下如果你给 display: inline-block 然后 vertical-align:baseline;

.wraper {
  
  border-style: solid;
  border-width: 2px;
  border-color: red;
  text-align: center;
}
.boxer {
  width: 25%;
  padding: 10px 10px 0 10px;
  display: inline-block;
  vertical-align:top;
  text-align: left;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="wraper">
  <div class="boxer b1">
    <h2>Heading 1</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.Donec id elit non mi porta gravida at eget metus.  Donec sed odio dui</p>
  </div>
  <!--end of emp div -->
  <div class="boxer b2">
    <h2>Heading 2</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
  </div>
  <!--end of cli div -->
  <div class="boxer b3">
    <h2>Heading 3</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
  </div>
  <!--end of doc div -->
   
</div>
<!--end of box div -->