Question

如何匹配h1与p标签的高度？我想将h1设置为左侧，然后将p设置在同一基线

上

.row_cont {
  float: left;
  width: 33.33333333%;
  overflow: hidden;
  border-left: 0.5px solid rgba(0, 0, 0, 0.37);
  padding-right: 15px;
  padding-left: 15px;
}

.row_cont h1 {
  font-size: 70px;
  float: left;
  margin-right: 10px;
}

.row_cont p {
  font-size: 12px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="page_container">
  <div class="row">
    <div class="col-md-12">
      <div class="row_cont">
        <h1>1</h1>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
      <div class="row_cont">
        <h1>2</h1>
        <p>Aenean massa. Cum sociis natoque penatibus </p>
      </div>
      <div class="row_cont">
        <h1>3</h1>
        <p>Cras dapibus. Vivamus elementum semper nisi. </p>
      </div>
    </div>
  </div>
</div>

我尝试过纵向对齐，但它不起作用，这是我的fiddle

Answer 1

编辑：

这只能通过vaules的反复试验来实现，因为行（以及字体中的最高字符）超出了您在H1中使用的数字的顶部。基本上，在两个容器上使用display: inline-block;和vertical-align: top，然后调整两者的margin-top设置：

.h1_cont, .p_cont  {
  display: inline-block;
  vertical-align: top;
}
.h1_cont h1 {
   margin-top: 0;
}
.p_cont p {
  margin-top: 5px;
}

https://fiddle.jshell.net/rk7nap5u/3/

Answer 2

你可以使用兄弟css选择器......

＆＃13;

h1, h1 + p {
  line-height: 1.5;
  font-size: 2rem;
  font-weight: bold;
  display: inline;
}

＆＃13;

<h1>Title</h1><p>Paragraph</p>

＆＃13;

如何用p来内联h1以匹配高度？

2 个答案: