Question

这就是我需要的：一个div sec-3（橙色）与另一个div sec-2（白色）重叠。我通过给sec-3 margin-top: -12%来做到这一点。（这就是我想要的）。但是橙色div中的h3与图像太近了。

问题：h3 margin-top: 5%;在sec-3 h3中h3，.sec-2 { text-align: center; z-index: 11; } .sec-2 img { margin-top: 0%; margin-left: 0; margin-right: 0; } .sec-3 { margin-top: -12%; width: 100%; background-color: orange; text-align: center; } .sec-3 img { margin-top: %; } .sec-3-headlines { background-color: blue; margin-top: 5%; }移动整个div，而不是向下移动<div class="sec-2"> <h3>Say hi to Keeva.</h3> <p class="sales-copy">World’s most smartest personal assistant in your procket.</p>  <img src="img/img-3.png" width="90%">  </div> <div class="sec-3">  <div class="sales-copy-wrap"> <h3 class="sec-3-headlines">Get organized with events, tasks and notes.</h3> </div> <div class="image-wrapper"> <img src="img/img-1.png" width="50%" height=""> </div> <div class="sales-copy-wrap" id="normalize-margin-copy"> <p class="sales-copy">Now more then ever it is critical for smart professionals to stay up to date with important deadlines.</p> </div> </div>。 / p>

目前：sec-3中的$flag=True; echo'<table><tr><td>Companyname</td><td>Value</td>'; foreach ($data as $gegevens){ $companyname = $gegevens['Companyname']; $value = $gegevens['Value']; if($flag){ $flag=false; echo '<tr><td>'.$companyname.'</td><td>'.$value.'</td></tr> '; }else{ echo '<tr><td> </td><td>'.$value.'</td></tr> '; } } echo'</table>';落后于sec-2的图像。

这就是我的样子：http://imgur.com/a/IeTw8

var associatesSchema = BaseMongoOperationsSchema.extend({
    type: {
        type: String
    },
    name: {
        type: NameSchema
    }
});

var AssociatesInfoSchema = AssociatesSchema.extend({
    source : String,
    confidence : mongoose.Schema.Types.Double,
    resultId : String,
    rating : {type:Number,default:undefined}
});

Answer 1

这不是个好主意！然后创建3个部分。用margin-top转换图像。

但为了解决您的问题，您可以为.sec-3-headlines提供填充

Answer 2

您可以使用positioning放置h3

＆＃13;

/* SECTION 2 */

.sec-2 {
  text-align: center;
  z-index: 11;
}

.sec-2 img {
  margin-top: 0%;
  margin-left: 0;
  margin-right: 0;
}


/* SECTION 3 */

.sec-3 {
  margin-top: -12%;
  width: 100%;
  background-color: orange;
  text-align: center;
}

.sec-3 img {
  margin-top: %;
}

.sec-3 .sales-copy-wrap {
  position: relative;
}

.sec-3-headlines {
  background-color: blue;
  position: absolute;
  width: 100%;
  margin: 0;
  top: 20px; /* adjust this value to lower the headline */
}

＆＃13;

<div class="sec-2">
  <h3>Say hi to Keeva.</h3>
  <p class="sales-copy">World’s most smartest personal assistant in your procket.</p>

  <!-- iphone 1 image -->
  <img src="https://placehold.it/200x400" width="90%">
  <!--            <div class="grey-box"> </div>
 -->
</div>
<div class="sec-3">
  <!-- iphone image  -->
  <div class="sales-copy-wrap">
    <h3 class="sec-3-headlines">Get organized with events, tasks and notes.</h3>
  </div>
  <div class="image-wrapper">
    <img src="https://placehold.it/200x400" width="50%" height="">
  </div>
  <div class="sales-copy-wrap" id="normalize-margin-copy">
    <p class="sales-copy">Now more then ever it is critical for smart professionals to stay up to date with important deadlines.</p>
  </div>
</div>

＆＃13;

在div中为h3添加余量会移动整个div吗？

2 个答案: