如何仅使用 css 和 html 重构并排堆叠的 HTML 元素？
对于移动版本，我希望标题位于顶部 -> 然后是轮播 -> 然后是表单。对于桌面版本，我希望轮播位于屏幕的左半部分，标题和表单位于屏幕的右侧并堆叠。
MM们浏览 89回答 2
2回答
-
慕容森
#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> -
繁星点点滴滴
提供更多自定义机会的方法是制作 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>
随时随地看视频慕课网APP
相关分类
Html5