另一个div里面的Div试图走出它的位置

Question

我在另一个div区域内有一个div但是当我进入移动设备时，它就会消除它所在的div父母。 该网站现已上线 - ＆gt; tsuts.tskoli.is/2t/2809984199/skapalon

.Projectkort，.zoomimg .projectkorttextarea以及下面的内容也是@media max width 486px的一部分

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

可能你的问题的原因是HTML标记不一致，因为你的一个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>