对于移动版本，我希望标题位于顶部 -> 然后是轮播 -> 然后是表单。对于桌面版本，我希望轮播位于屏幕的左半部分，标题和表单位于屏幕的右侧并堆叠。
2 回答
慕容森
TA贡献1853条经验 获得超18个赞
#top {
width: 50%;
background-color: red;
height: 10vh;
float: right;
}
#middle {
width: 50%;
background-color: green;
height: 30vh;
float: left;
}
#bottom {
width: 50%;
float: right;
vertical-align: top;
background-color: blue;
height: 15vh;
vertical-align: top;
}
html,
body {
margin: 0;
padding: 0;
}
@media only screen and (max-width: 375px) {
#top,
#middle,
#bottom {
width: 100%;
}
/* STYLES GO HERE */
}
<div id='container'>
<div id='top'></div>
<div id='middle'></div>
<div id='bottom'></div>
</div>
繁星点点滴滴
TA贡献1803条经验 获得超3个赞
提供更多自定义机会的方法是制作 HTML 的重复版本，并更改其中一个版本的布局以匹配您的移动布局。通过为两个版本提供不同的类，您可以真正轻松地更改在什么时间可见的布局。
举个例子：
<body>
<div class='desktop'>
//desktop layout
</div>
<div class='mobile'>
//mobile layout
</div>
</body>
<style>
.mobile {
display: none;
}
.desktop {
display: block;
}
@media only screen and (max-width: 900px) {
.mobile {
display: block;
}
.desktop {
display: none;
}
</style>
- 2 回答
- 0 关注
- 88 浏览
添加回答
举报
0/150
提交
取消