我试着让我的网站根据浏览器宽度切换布局,如下所示:
桌面 View :
手机查看:
我希望在手机上查看时,右侧的元素位于左侧两个元素的中间。我尝试使用纯 CSS 来做,但无法找出正确的层次结构。处理此问题的正确方法是什么?
最佳答案
这是一个简单的示例,它在媒体查询中使用经典的 float 在视口(viewport)高于特定点时重新排列元素。您应该使用移动优先策略来让事情变得简单。这些框在移动设备上按自然顺序堆叠,当达到特定视口(viewport)宽度时,您开始将它们操纵成列布局。
:root {
--blue: #0074D9;
--green: #2ECC40;
--red: #FF4136;
--white: #FFFFFF;
--gray: #AAAAAA;
--black: #111111;
}
* {
box-sizing: border-box;
}
.container {
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
.section {
font-size: 2vw;
padding: 1vw;
}
.section--1 {
background-color: var(--red);
}
.section--2 {
background-color: var(--green);
}
.section--3 {
background-color: var(--blue);
}
@media (min-width: 480px) {
.section--1,
.section--3 {
float: left;
width: 70%;
}
.section--2 {
float: right;
width: 30%;
}
}
<main class="container">
<section class="section section--1">Element 1</section>
<section class="section section--2">Element 2</section>
<section class="section section--3">Element 3</section>
</main>
关于html - 在手机上将右侧的div挤压到左侧的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50761900/