我有一个网站是 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 时它们不显示,所以我必须设置高度。有没有办法让它们根据内容自动调整高度?
最佳答案
您需要将此添加到您的移动 CSS:
@media screen and (max-width: 480px) {
.tile-post > :first-child
{
position:relative;
}
}
关于css - 如何为移动但固定桌面的div设置自动高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53549317/