Question

基本上我正在寻找这个：

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向左捕捉并堆叠在顶部..任何想法？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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;
    }
}

在窗口调整大小的并排divs堆栈

2 个答案: