對(duì)于移動(dòng)版本，我希望標(biāo)題位于頂部 -> 然后是輪播 -> 然后是表單。對(duì)于桌面版本，我希望輪播位于屏幕的左半部分，標(biāo)題和表單位于屏幕的右側(cè)并堆疊。
2 回答
慕容森
TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超18個(gè)贊
#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>
繁星點(diǎn)點(diǎn)滴滴
TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超3個(gè)贊
提供更多自定義機(jī)會(huì)的方法是制作 HTML 的重復(fù)版本，并更改其中一個(gè)版本的布局以匹配您的移動(dòng)布局。通過為兩個(gè)版本提供不同的類，您可以真正輕松地更改在什么時(shí)間可見的布局。
舉個(gè)例子：
<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 關(guān)注
- 128 瀏覽
添加回答
舉報(bào)
0/150
提交
取消