在电话上挤压右div到左div

Question

我尝试根据浏览器宽度进行网站切换布局，如下所示：

桌面视图：

手机浏览：

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

Answer 1

使用纯CSS，您可以使用media queries 以下是一些有用的链接： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries https://www.w3schools.com/css/css3_mediaqueries_ex.asp https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如果您寻找framework，请查看Bootstrap

Answer 2

这是一个简单的示例，使用媒体查询中的经典浮点数在视口高于某个点时重新排列元素。您应该使用移动优先策略来保持简单。这些框在移动设备上以其自然顺序堆叠，并且当达到特定视口宽度时，您可以将它们操纵为列布局。

＆＃13;

＆＃13;

{{ $new_recordss['ProcedureName'] }}

＆＃13;

: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%;
  }
  
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

<style>
#ContentPanel1 {
    text-align:center
}
#ContentLeft1 {
    background:Yellow;
    float: left;
    width: 70%;
    height: 150px;
}
#ContentMiddle1 {
    background:Orange;
    float: left;
    width: 30%;
    height: 400px;
}
#ContentRight1 {
    background:Blue;
    float: left;
    width: 600px;
    position: relative;
    margin: -220px 0px 0px 20px;
    height: 215px;
    }

@media (max-width: 699px) {
#ContentLeft1 {
    background: Yellow;
    float: none;
    width: 100%;
    height: 150px;
}
#ContentMiddle1 {
    background: Orange;
    float: left;
    width: 100%;
    height: 400px;
}
#ContentRight1 {
    background: Blue;
    float: left;
    width: 100%;
    position: relative;
    margin: 0px 0px 0px 0px;
    height: 215px;
    }
}
</style>
<div id="ContentPanel1">
  <div id="ContentLeft1">
    element 1              
  </div>
  <div id="ContentMiddle1">
    element 2
  </div>
  <div id="ContentRight1">
    element 3            
  </div>
</div>