Question

我试图添加一个jsfiddle，但是没能。

我正试图抓住移动设计，我遇到了一个小问题，图片从网站的移动版本中消失了。

我确信我在代码上弄乱了某人。

我尝试浮动图像，显示：内联块，图像一直隐藏在固定的导航栏后面。

有问题的页面位于此处：http://try.lucianooliveira.net/flooring.html，当您将窗口大小调整为320x480时，图像将完全消失。

这是我在媒体查询下的内容

 @media screen and (max-width: 768px) {

   .main_content {
  width: 100%;
  height: 80px;
  margin-top: 100px;
  display: block;
  }



  .main_content h1 a {
    margin-top: -20px;
   font-size: 1em;
   text-align: center;
  }

  .main_content p {
    margin-top: 10px;
  }


  .logo,
  .logo li,
  .col  {
    display: block;
    width: initial;
    height: initial;
    margin: initial;
  }

  .logo h1 {
  font-size: .6em;
  display: block;
  width: 100%;
  text-align: center;

}

  .nav ul {
    margin-top: 10px;
  }

  .nav ul li a {
    text-decoration: none;
    color: white;
    text-align: center;
  }

  .column1 {
  float: left;
  width: 100%;

  }

.column1 h1 {
  color: purple;
  text-align: center;
  width: 100%;
}

.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}


}

Answer 1

你的形象并没有消失。它躲在固定的酒吧后面。

发生这种情况的原因是因为固定元素会从html文档的正常流中弹出。因此，您需要通过在图像上应用边距顶部来补偿它的高度，以便将其推向一切。

将此添加到您的css媒体查询中，看看会发生什么：

@media screen and (max-width: 768px) {
/*your existing code goes here, but add the following ruleset */
  .wrapperFlooring img {
    margin-top: 95px;
  }
}

我之所以选择95px，是因为它是固定导航的高度......这个数字可能会有所不同！

图像未显示在移动版本上

1 个答案: