html - 另一个 div 内的 div 试图离开它的位置

Question

我在另一个 div block 中有一个 div，但是当我进入移动设备时，它会离开它所在的 div 父级。该网站在这里 -> tsuts.tskoli.is/2t/2809984199/skapalon

.Projectkort, .zoomimg .projectkorttextarea 以及接下来要看的@media max width 486px

.projectkort {
  margin: 7px;
  display: inline-block;
  width: calc(100% - 14px);
  height: 285px;
  background-color: white;
  border-radius: 3px;
  margin-right: 10px;
  margin-top: 10px;
}
.zoomimg {
  margin: 7px;
  width: calc(100% - 14px);
  height: 215px;
  transition: all .3s ease;
  opacity: 0.8;
  position: relative;
  overflow: hidden;
}
.zoomimg img {
  height: 100%;
  width: 100%;
  transition: all 0.3s;
}
.zoomimg:hover {
  cursor: pointer;
  opacity: 1.0;
}
.zoomimg:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.projectkorttextarea {
  height: 63px;
  width: 100%;
  vertical-align: bottom;
}
.projectkorttitle {
  font-size: 15px;
  color: #d40050;
  font-family: 'Lato';
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  margin-left: 7px;
}
.projectkortsite {
  font-size: 13px;
  color: #666666;
  font-family: 'Lato';
  font-weight: normal;
  text-transform: lowercase;
  position: relative;
  margin-left: 7px;
  margin-top: 4px;
}
.projectkorttype {
  font-size: 13px;
  color: #cccccc;
  font-family: 'Lato';
  font-weight: bold;
  position: relative;
  right: 100;
  float: right;
  margin-right: 7px;
}

<div class="section group">
  <div class="col span_1_of_4">
    <div class="projectkort">
      <div class="zoomimg">
        <img src="img/latibaer.jpg">
      </div>
      <div class="projectkorttextarea">
        <span class="projectkorttitle">Latibær</span>
        <br>
        <span class="projectkortsite">www.lazytown.com</span>
        <span class="projectkorttype">Web</span>
      </div>
    </div>
  </div>

Answer 1

问题的原因可能是 HTML 标记不一致，因为您的一个 div 容器没有关闭。开放的 div 标签多于封闭的 div 标签。

<div class="section group">
  <div class="col span_1_of_4">
    <div class="projectkort">
      <div class="zoomimg">
        <img src="img/latibaer.jpg">
      </div>
      <div class="projectkorttextarea">
        <span class="projectkorttitle">Latibær</span>
        <br>
        <span class="projectkortsite">www.lazytown.com</span>
        <span class="projectkorttype">Web</span>
      </div>
    <!-- missing </div> tag -->
  </div>
</div>