html - 在手机上将右侧的div挤压到左侧的div

Question

我试着让我的网站根据浏览器宽度切换布局，如下所示:

桌面 View :

手机查看:

我希望在手机上查看时，右侧的元素位于左侧两个元素的中间。我尝试使用纯 CSS 来做，但无法找出正确的层次结构。处理此问题的正确方法是什么？

Answer 1

这是一个简单的示例，它在媒体查询中使用经典的 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>