對于移動版本，我希望標題位于頂部 -> 然后是輪播 -> 然后是表單。對于桌面版本，我希望輪播位于屏幕的左半部分，標題和表單位于屏幕的右側并堆疊。
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 關注
- 120 瀏覽
添加回答
舉報
0/150
提交
取消