窗口调整大小时并排的div堆栈答案

【问题标题】：side by side divs stack on window resize窗口调整大小时并排的div堆栈
【发布时间】：2015-11-03 01:22:38
【问题描述】：

基本上我正在寻找这个：

Two Divs next to each other, that then stack with responsive change

但是，困难在于我需要将 Div #2（右 div）堆叠在 Div #1（左 div）之上，而不是被推到它下面。

我必须将 div 并排放置如下：

<div class="container" style="width: 1100px">
    <div class="left-div" style="float: left; width: 700px;"> </div>
    <div style="float: left; width: 300px;"> </div>
</div>

我尝试的是做一个 css 媒体查询，它只是将左 div 向下推 300px，使用以下内容：

@media screen and (max-width: 1100px) {
    .left-div {
        position: relative;
        top: 350px;
    }
}

但是，这不会导致右侧 div 向左对齐并堆叠在顶部。有什么想法吗？

【问题讨论】：

标签： html css

【解决方案1】：

使用 float:right 并更改 html 的顺序。

.right-div {
  float: right;
  width: 30%;
  background-color: red;
}
.left-div {
  float: right;
  width: 70%;
}
@media screen and (max-width: 1100px) {
  .container > div {
    width: 100%;
  }
}

<div class="container" style="max-width: 1100px;">
  <div class="right-div">RIGHT DIV</div>
  <div class="left-div">LEFT DIV</div>
</div>

【讨论】：

【解决方案2】：

试试这个https://jsfiddle.net/1aj7wvyz/

HTML

<div class="container">
    <div class="divs div-2">Div 2 </div>
    <div class="divs div-1">DIV 1 </div>
</div>

CSS

.divs {
    display: inline-block;//<-Here you only need this
    padding: 100px;
    border: 1px solid black;
    margin: 20px;
}

.div-2 {
    float: right:
}

.div-1 {
    float: left;
}

@media screen and (max-width: 400px) { //You will change width of course
    .divs {
        display: block;
        margin: 0 auto;
    }
}

【讨论】：