Question

我遇到了一个重大问题，即在缩小网络浏览器并将它们与右边对齐之前，最后一个重叠的div跳到了一个之前。我不知道如何解决它。我试过Google等等。发生了什么，为什么？我该如何解决这个问题？

<div id="why-use-fastq-wrapper">
  <div id="why-use-fastq">
    <h3>WHY SHOULD WE USE FASTQ?</h3>
    <div id="why-use-fastq-img">
      <img src="images/bg2.png">
    </div>
  </div>

<div class="step-teaser2">
<div class="step-container2">
  <div class="left2"> 
        <div class="img2">
      <img src="images/sustainable.png" alt="" />
    </div>
    <div class="step-title2">TEXT TEXT TEXT</div>
    <p>TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT.</p>
  </div>
    <div class="right2">
       <div class="img2">
    <img src="images/easy.png" alt="" />
  </div>
        <div class="step-title2">TEXT TEXT TEXT</div>
    <p>TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT.</p>
    </div>
</div>

<div class="step-container2">
  <div class="left2"> 
      <div class="img2">
      <img src="images/plan.png" alt="" />
    </div>
    <div class="step-title2">TEXT TEXT TEXT</div>
    <p>TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT.</p>
  </div>
    <div class="right2">
        <div class="img2">
        <img src="images/stress.png" alt="" />
    </div>
    <div class="step-title2">TEXT TEXT TEXT</div>
        <p>TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT</p>
    </div>
    </div>
</div>


#why-use-fastq-wrapper h3{
  font-family: gill sans;
  font-size: 40px;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 40px;
}
#why-use-fastq-wrapper{
  margin-top: 0px;
  margin-bottom: 75px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
  #why-use-fastq{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
    #why-use-fastq-img{
    width: 100%;
    margin-bottom: 40px;
  }
    #why-use-fastq-img img{
      width: 100%;
      height: 100%;
    }
.step-teaser2 {
  margin-top: 100px;
  margin-left: 5%;
  margin-right: 5%;
}

.step-container2 {
  margin: 40px auto;

  max-width: 960px;
  width: 100%;

  height: 225px;  /* same as left/right */

  /* border: 1px solid black; */
}

.step-container2 .step-title2 {
  font-family: gill sans;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
}

.step-container2 p {
  font-family: times;
  font-size: 18px;
  font-weight: normal;
  text-align: justify;
}

.img2{
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 10%;
  margin-bottom: 15px;
}

.left2 {
  float: left;
  width: 47%;
}

.left2 img {
  text-align: center;
  width:100px;
}

.right2 {
  float: right;
  width: 47%;
}

.right2 img {
  text-align: center;
  width: 100px;
}


@media(max-width: 640px) {

    .step-container2 {
      margin: 0 auto; 
    }

    .step-container2 img {
      display: none;
    }

    .left2 {
      float: none;
      width: 100%;
    }
    .right2 {
      float: none;
      width: 100%;
    }

}

Answer 1

在640px断点处将 .step-container2 的高度设置为“auto”;

@media(max-width: 640px) {    
    .step-container2 {
       height:auto;  // add this
       margin: 0 auto; 
    }
}

Answer 2

你可以解决它，如果你漂浮你的＆＃39; p＆＃39;或者＆＃39; div＆＃39;元素在左边。这样它就不会重叠。

CSS：Div跳了下来

2 个答案: