将 DIVS 放在第一个 DIV 下的 av DIV 中

Question

当您调整 [=27] 大小时，我想将 DIVS（灰色和红色）放在第一个 DIV（黑色）下方的 DIV（黑色）内=] 且屏幕小于 1024 像素。看看下面的例子。您还可以查看附件中的图片。

我真的很想在这里得到一些建议，我现在完全迷失在这里。

这就是我希望它在大于 1024 像素的屏幕上的显示方式：

<div id="black">
    <div id="grey"></div>
    <div id="red"></div>
</div>

这就是我希望它在小于 1024 像素的屏幕上的显示方式：

<div id="black"></div>
<div id="grey"></div>
<div id="red"></div>

Answer 1

抱歉，写的是不可能的。

您不能使用 CSS 将项目移动到其包含结构之外。您只能在它们当前的结构内重新格式化它们。

您可以选择根据媒体查询（屏幕尺寸）复制现有的黑色 div 和 show/hide。

或者，您可以使用 jQuery/javascript 移动 DOM 项。但是 CSS 不能单独做到这一点。

Answer 2

仅使用 CSS（使用媒体查询）和两个容器 <div> 来分隔逻辑：

@media (max-width: 1024px) {
  .large { display: none; }
  .small { display: block; }
  .black { height: 100px; }
}

@media (min-width: 1025px) {
  .large { display: block; }
  .small { display: none; }
  .red, .grey { float: left; }
  .black:after { content: ""; display: table; clear: both; }
  .red { width: calc(50% - 5px); margin-left: 10px; }
  .grey { width: calc(50% - 5px); }
}

.large {
  height: 200px;
}

.small {
  height: 200px;
}

.black {
  background-color: black;=
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
}

.red {
  background-color: red;
  height: 100px;
}

.grey {
  background-color: grey;
  height: 100px;
}

<div class="large">
  <div class="black">
    <div class="grey"></div>
    <div class="red"></div>
  </div>
</div>

<div class="small">
  <div class="black"></div>
  <div class="grey"></div>
  <div class="red"></div>
</div>

以上代码段在 full page 或此 codepen

中查看效果更好

Answer 3

不需要重复内容。

#black{background:black;overflow:hidden;}

#grey, #red{
  min-height:100px;
  margin:2%;
  float:left;
  width:47%;
}

#grey{background:gray;margin-right:1%}
#red{background:red;margin-left:1%}

@media (min-width:1024px){
  #black{padding-top:100px;}
  #grey, #red{
    float:none;
    width:auto;
    margin:0;
  }
}

<div id="black">
  <div id="grey"></div>
  <div id="red"></div>
</div>

将 DIVS 放在第一个 DIV 下的 av DIV 中

Place DIVS inside av DIV under the first DIV

css

stylesheet