gpt4 book ai didi

html - CSS Div 定位

转载 作者:太空宇宙 更新时间:2023-11-04 11:07:37 24 4
gpt4 key购买 nike

以下代码中的样式在大型设备(台式机和平板电脑)上运行良好。但是在移动设备上,由于 margin-top 值,大多数 div 都是重叠的。

我知道这不是响应式设计网站的正确方法。你能给我一个解决方案吗?

#welcome {
background: yellow;
background-size: 100% 100%;
width: 100%;
height: 600px;
}
#inquiry {
margin-top: 600px;
width: 100%;
height: 500px;
background: red);
}
#products {
margin-top: 1100px; /*(margin-top of inquiry + height of inquiry) */
width: 100%;
height: 500px;
background: green;
}
#footer {
margin-top: 1600px; /* (margin-top of products + height of products) */
width: 100%;
height: 500px;
background: blue;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="welcome">
Welcome Message
</div>
<div id="Inquiry">
Inquiry Form
</div>
<div id="products">
Products
</div>
<div id="footer">
footer
</div>

最佳答案

虽然使用 Mediaqueries 更好,但您也可以使用:

margin-top: 10vh;
height: 20vh;

这会将 div 向下放置屏幕高度的 10%,并为其赋予屏幕尺寸的 20% 的高度。问题是它是 CSS3,所以旧的浏览器不支持它。 (我认为android 4.0以下的都不会支持它。你必须测试这个)使用过时浏览器的人数越来越少。

关于html - CSS Div 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33844475/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com