以非逻辑顺序浮动3个div

Question

我的网站遇到了一些问题。

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

div 1是您可以填写信息的地方 div 2是您的消息的textarea和发送按钮 div 3是联系信息 和div 4是社交媒体的标志。

这一切都很棒。在移动设备上，它们在彼此之下缩放，它就像一个魅力。

但是现在我的设计师想为景观手机添加一种格式（我同意他是nesacery因为如果你把所有的div保持在彼此之下，那么联系页面会很长。所以他想出的是：< / p>

所以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。在jsfiddle中是显示的每个框的位置。如果右边的方框被交换了，那就无所谓了。

希望有人能帮助我！

Answer 1

如果我理解你正在寻找的“响应”行为，你可以将两个第一个div和最后两个组合在一起。并将包裹浮动到左侧。然后使用百分比宽度和max-width / min-width，您可以实现所需的行为。

请参阅此 FIDDLE （我在您的小提琴中修改了#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;
}

现在，如果您更改小提琴窗口的宽度，您将看到如果窗口宽度超过760px，则所有div都会正常对齐。如果窗口介于760px和380px之间，则会出现令人厌恶的行为。如果窗口低于190px，那么所有的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;
}