响应div排序

Question

我正在尝试改善网页。当前的布局是这样的。数字代表我要操纵的div。

我想使Web响应，并尝试实现该布局的新布局。我目前遇到的问题是div 4和div 5在div 3内部，因此如果没有放置div 4，我将无法把div 5放在一切之上在它下面。

我该如何实现？

Answer 1

我面临几乎类似的情况，并按照以下步骤解决了该问题：

1. 分别将div复制到新的html页面中（仅适用于粗糙 目的，我们稍后将删除此页面）。

2. 确保所有div现在彼此独立。

3. 导入引导程序（https://getbootstrap.com/）
4. 现在使用.table类创建一个引导表，并将col-md- x 分配给每一行。 （将x的值替换为每个div所需的宽度）

例如，如果您只需要2 div，而第一个div是最大的div，则可以使用以下代码：

<tr class="something">
    <td class="col-md-8">A</td>
    <td class="col-md-4">B</td>
</tr>

Answer 2

由于div 3可能似乎仅用作容器，我删除了它，因为它抑制了简单的布局，并且从结构上讲，它可以放置在div-4上方以获取静态内容。随时询问更多细节，是否div-3是特定目标的要求。

基本上，浮点数将尝试使用一些规则来填充给定容器中的空间。我们可以结合使用float: right;和媒体查询来获得所需的结果。主要警告是＃div-2必须比＃div-4高，否则可能引起一些与布局有关的问题-指定适当的最小高度将对此有所帮助。本质上，下面的示例是您的典型响应式布局，但它使用左右浮动以及战略性计划的标记来根据需要对元素进行排序/重新排序。

向左浮动时-所有元素按显示顺序显示。 当第4位和第5位向右浮动时，div 2占66％，第4位和第5位向右浮动以填充其余33％。

div{
  min-height: 50px; 
  border: 1px solid #333;
  width: 100%; 
  float: left; 
  box-sizing: border-box; 
  margin: 10px 0;
}

#div-1{
  width: 100%; 
  padding: 10px;
}

@media (min-width: 720px){
  #div-2{
    width: 66.6%;
    height: 100px;
  }
  #div-4, #div-5{
    float: right; 
    width: 33.3%;
  }
} 

<div id="div-1">
  <div id="div-4">4</div>
  <div id="div-2">2</div>
  <div id="div-5">5</div>
</div>