控制和对齐CSS中的段落

Question

我有这个问题带三个内联容器的页脚

段落似乎是在向上推标题，而不是向下填充空格！我希望所有的标题都在同一高度！我做错了什么？

.section5 {
  position: relative;
  height:562px;
  margin:  0px 64px;
  background-color: #ad7464;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
}
.sign2 {
  text-align: center;
  position: relative;
  top:20px;
  bottom: 20px;
}
.left {
  display: inline-block;
  width: 40%;
  max-width: 350px;
  min-height: 220px;
  border-right: solid 2px rgba(255, 255, 255, 0.5);
  padding-right: 50px;
}
.right {
  display: inline-block;
  width: 40%;
  max-width: 350px;
  min-height: 220px;
  border-left: solid 2px rgba(255, 255, 255, 0.5);
  padding-left: 50px;
}
.middle {
  display: inline-block;
  width: 40%;
  max-width: 450px;
  min-height: 200px;
  margin: 0px 20px;
}

  <div class="section5">
      <div class="sign2">
        <img src="img/sign2.png" alt="Beauty Secrets Logo" /></div>
      <div class="wrapper">
        <div class="left ">
          <h3>Conact us</h3>
          <p class="paragraph bottom">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          </p>
        </div>
        <div class="middle ">
          <h3>Conact us</h3>
          <p class="paragraph bottom">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          </p>
        </div>
        <div class="right ">
          <h3>Conact us</h3>
          <p class="paragraph bottom">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          </p>
        </div>
      </div>
    </div>

Answer 1

您应该将vertical-align: top添加到left、middle和right类中。

.section5 {
  position: relative;
  height: 562px;
  margin: 0px 64px;
  background-color: #ad7464;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
}
.sign2 {
  text-align: center;
  position: relative;
  top: 20px;
  bottom: 20px;
}
.left {
  display: inline-block;
  width: 40%;
  max-width: 350px;
  min-height: 220px;
  border-right: solid 2px rgba(255, 255, 255, 0.5);
  padding-right: 50px;
  vertical-align: top;
}
.right {
  display: inline-block;
  width: 40%;
  max-width: 350px;
  min-height: 220px;
  border-left: solid 2px rgba(255, 255, 255, 0.5);
  padding-left: 50px;
  vertical-align: top;
}
.middle {
  display: inline-block;
  width: 40%;
  max-width: 450px;
  min-height: 200px;
  margin: 0px 20px;
  vertical-align: top;
}

<div class="section5">
  <div class="sign2">
    <img src="img/sign2.png" alt="Beauty Secrets Logo" /></div>
  <div class="wrapper">
    <div class="left ">
      <h3>Conact us</h3>
      <p class="paragraph bottom">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      </p>
    </div>
    <div class="middle ">
      <h3>Conact us</h3>
      <p class="paragraph bottom">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      </p>
    </div>
    <div class="right ">
      <h3>Conact us</h3>
      <p class="paragraph bottom">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      </p>
    </div>
  </div>
</div>

Answer 2

尝试将段落元素的页边空白设置为设定大小，以便缩小页眉和段落之间的间隙。