在CSS

Question

我有这个问题 footer with three inline container

段落似乎是向上推动标题而不是向下填充空间！我希望标题都在同一高度！我究竟做错了什么？

.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

您应该将<section class="project-images"> <div class="container"> <div class="section-heading"> <h3 class="title wow fadeInDown" data-wow-delay=".3s"> TEXT </h3> <h3 class="project-imgsub">Images and Details</h3> <div class="row"> <div class="col-sm-4 "> <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms"> <figcaption> <h2>TITLE TEXT</h2> <p class="para"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique eros, sed auctor diam justo et tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis nibh a nisl malesuada scelerisque. Vivamus malesuada nisi nisi, eu tempor ipsum finibus vitae. Ut at leo lacus. </p> </figcaption> <div class="img-wrapper"> <img src="images/hid.png " class="img-responsive" > </div> </figure> </div> <div class="row"> <div class="col-sm-4 "> <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms"> <figcaption> <h2>TITLE Text text text text</h2> <p class="para"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique eros, sed auctor diam justo </p> </figcaption> <div class="img-wrapper"> <img src="images/hid.png " class="img-responsive" > </div> </figure> </div> <div class="row"> <div class="col-sm-4 "> <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms"> <figcaption> <h2> TITLE Text tex text</h2> <p class="para"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, </p> </figcaption> <div class="img-wrapper"> <img src="images/hid.png " class="img-responsive" > </div> </figure> </div> <div class="row"> <div class="col-sm-4"> <figure class="wow fadeInLeft animated portfolio-item res-wall" data-wow-duration="500ms" data-wow-delay="0ms"> <figcaption> <h2>TITLE Text text text text</h2> <p class="para"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique eros, sed auctor diam justo et tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis nibh a nisl malesuada scelerisque. Vivamus malesuada <p> </figcaption> <div class="img-wrapper"> <img src="images/hid.png " class="img-responsive" > </div> </figure> </div> <div class="row"> <div class="col-sm-4"> <figure class="wow fadeInLeft animated portfolio-item res-wall" data-wow-duration="500ms" data-wow-delay="0ms"> <figcaption> <h2>TITLE TEXT TEXT TEXT</h2> <p class="para"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, nec posuere leo. Aenean justo nibh, ultricies consequat faucibus in, molestie vel metus. Pellentesque dignissim, nisl in luctus ornare, ex est tristique eros, sed auctor diam justo et tellus. Lorem ipsum dolor sit amet, consectetur </p> </figcaption> <div class="img-wrapper"> <img src="images/hid.png " class="img-responsive" > </div> </figure> </div> <div class="row"> <div class="col-sm-4"> <figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms"> <figcaption> <h2> TITLE TEXT TEXT </h2> <p class="para"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet magna, </p> </figcaption> <div class="img-wrapper"> <img src="images/hid.png " class="img-responsive" > </div> </figure> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section>添加到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;
}

Answer 2

尝试将段落元素的margin-top设置为设置大小，以便您可以缩小标题和段落之间的差距。