Question

我有一个响应式设计网站，在媒体查询后需要我重新排序某些项目的布局后，奇怪的布局发生了变化：基本上我有4个部分，a，b，c，d 所以A是左列B是右列，c和d是它们自己的行（*表示新行） * A |乙 * C * D. 然后我需要按顺序将它重新排序到4个distict行 * 一个 * C * B. * D. 我可以使用Javascript jQuery重新排序，但现在更愿意依赖它，所以我正在寻找一个全CSS解决方案，PHP解决方案，最后如果所有Javascript / jQuery解决方案都不可能。

Answer 1

Here you go

<强> HTML：

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

<强> CSS

#a { background-color: #aaa; }
#b { background-color: #bbb; }
#c { background-color: #ccc; }
#d { background-color: #ddd; }

div { 
    height: 100px;
    width: 100%;
}

@media 
  screen and (min-width: 420px) {
    div { position: absolute; }
    #a{ 
       width: 50%;
    }

    #b { 
      top: 100px;
    }

    #c {
      left: 50%;
      width: 50%;
    }

    #d { 
      top: 200px;
    }
}

用css来完成这个布局

1 个答案: