Question

所以，这就是我全屏时的样子：http://i.imgur.com/quQt09E.png
当我调整到某一点时，这就是我想看的方式：http://i.imgur.com/pKGKoCq.png

我只能将div 1放在div 2之上。我尝试了所有我知道但我担心在遇到这种挑战时我的知识有点受限。如果有人能帮助我，我真的很感激。

Answer 1

我认为你可以使用像Bootstrap这样的CSS网格来实现你正在寻找的东西。检查以下小提琴：http://jsfiddle.net/nunoarruda/156trje7/

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-sm-push-6 div2">DIV 2</div>
        <div class="col-xs-12 col-sm-6 col-sm-pull-6 div1">DIV 1</div>
    </div>
</div>

我使用了Bootstrap CSS网格和push / pull类来从小（sm）屏幕开始重新排序列。您可以将其更改为中（md）或更大。检查Bootstrap文档：http://getbootstrap.com/css/#grid-column-ordering

Answer 2

我看到div2下方有一个灰色矩形。这让我觉得div 2在div1里面。要在div1上设置永久div2，我将使用以下模式：

1）创建一个普通div，其中包括两个div。

2）在普通div中创建div2，宽度为100％，高度为普通div的50％。

3）与div1相同，但在下面定义。

这样两个div都固定在你可以随意移动的前一个div中。

调整大小时DIV 2在DIV 1之上

2 个答案: