以非逻辑顺序浮动3 div

Question

我的网站有点问题。

我有一个联系人，它基于4个div的位置，如下所示：

​

​

div 1是您可以填写信息的地方，div 2是您信息的文本区域，div 3是联系人信息，div 4是社交媒体图标。

一切都很好。在移动设备上，它们彼此比例尺，就像一种魅力。

但现在，我的设计师想为景观定位的手机添加一种格式(我同意他的观点，因为如果你把所有的div放在一起的话，联系人页面就会很长。)所以他想出的是：

​

​

因此，第1和第2分区与所有填写的字段同时进行。右边是社交媒体图标上的信息。

但现在开始我的问题了。因为浮动项目将彼此排列在一起。这意味着div2将停留在div 2旁边，div 3将位于div 1下方，如下所示(箭头会触发我想交换的2)：

​

​

有什么方法可以通过使用css来改变这种情况吗？我想出的解决方案是为这个问题编写一个新的代码，并让它在正确的景观模式注册之前不显示。但在我看来，这将是解决这一问题的一个沉重的办法。所以无论如何，我有一个更好的主意：

这里有一把小提琴：http://jsfiddle.net/skunheal/p6Yy6/

#container{
height:200px;
width:400px;
background:#212121;
}

#id1{
height:90px;
width:190px;
background:#fff;
float: left;
}

#id2{
height:90px;
width:190px;
background:#fff;
float: left;
}

#id3{
height:90px;
width:190px;
background:#fff;
 float: left;
}

#id4{
height:90px;
width:190px;
background:#fff;
 float: left;
}

这是我现在的css。在琴键中显示的是每一个盒子的位置。阿尔多，如果把右边的盒子换了，没关系。

希望有人能帮我！

Answer 1

如果我能很好地理解您正在寻找的“响应性”行为，那么您可以将第一个div和最后两个and放在一起。把包裹浮到左边。然后，使用一定的宽度和max-width/min-width，您可以实现所需的行为。

看看这个小提琴 (我修改了小提琴中#container的宽度，这样它就可以响应了)

HTML：

<div id="container">
    <div id="left_wrap">
        <div id="id1">left above</div>
        <div id="id2">left under</div>
    </div>
    <div id="right_wrap">
        <div id="id3">right above</div>
        <div id="id4">right under</div>
    </div>
</div>

CSS (修改)

#left_wrap,#right_wrap{
    width:50%;
    max-width:380px;
    min-width:190px;
    float:left;
}
#container {
    height:100%;
    width:100%;
    background:#212121;
}
#id1,#id2,#id3,#id4 {
    height:90px;
    width:190px;
    background:#fff;
    float: left;
}

现在，如果您更改了小提琴窗口的宽度，您将看到，如果窗口宽度超过760 is，div都对齐正常。如果窗口介于760 is和380 is之间，则会出现disired行为。如果这个窗口在190 to以下，那么div就会彼此站在一起。

Answer 2

由于您使用的是固定的高度/宽度，您应该能够使用绝对定位而不是浮标。

#container{
height:200px;
width:400px;
background:#212121;
position:relative;
}

#id1{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
left:0;
}

#id2{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
left:0;
}

#id3{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
right:0;
}

#id4{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
right:0;
}