css - 如何为移动但固定桌面的div设置自动高度

Question

我有一个网站是 metro 风格的磁贴。在桌面上，所有图 block 的宽度都是固定的。不过，我希望某些 div 在移动设备上基于内容高度。

如果我将高度设置为自动，div 就会消失。

我的网站是http://p2p.rudtek.com/you/ .桌面上最上面的照片是宽磁贴，下面的内容是高磁贴。

.tile.tall {
    width: 488px;
    height: 737px;
}

.tile-post.wide {
    width: 737px;
    height: 488px;
       color: #FFFFFF;
       font-size: 4em;
}

当它转到移动设备时，我希望它们是全宽和自动高度。

我试过这个:

@media screen and (max-width: 480px) {
  .tile-post.wide {
    width: 100%;
    height: auto;
    padding-bottom:0;
  }
  .tile-post.tall {
    width: 100%;
    height: auto;
  }
}

宽度很好，但是当我使用 auto 时它们不显示，所以我必须设置高度。有没有办法让它们根据内容自动调整高度？

Answer 1

您需要将此添加到您的移动 CSS:

@media screen and (max-width: 480px) {
   .tile-post > :first-child
   {
      position:relative;
   }
}