css用于显示div顶部的内容

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

将vertical-align:top;提交给.boxer并移除静态高度（height: 175px;）将解决您的问题。

因为默认情况下，您提供display: inline-block，然后vertical-align:baseline;

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

它有点不清楚，但我认为您需要在vertical-align:top;元素上设置inline-block。

注意：我也删除了固定的高度

＆＃13;

＆＃13;

.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;
  vertical-align: top;
  text-align: left;
  margin-left: 20px;
  margin-right: 20px;
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

Answer 3

在.boxer中添加float：left，如下所示

.boxer {
 width: 25%;
 height: 175px;
 padding: 10px 10px 0 10px;
 display: inline-block;
 text-align: left;
 margin-left: 20px;
 margin-right: 20px;
float:left;
}