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

Question

我有一个网站是地铁风格的瓷砖。在桌面上，所有图块的宽度都是固定的。我希望某些 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 时它们不会出现，所以我必须设置一个高度。有没有办法让它们根据内容自动高度？

标签： cssresponsive-designheight

Answer 1

您需要将其添加到您的移动 CSS：

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