html - 以非逻辑顺序 float 3 个 div

Question

我的网站有些问题。

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

div 1 是填写信息的地方 div 2 是您的消息的文本区域和一个发送按钮 div 3 是联系信息 和 div 4 是社交媒体图标。

这一切都很好。在移动设备上，它们在彼此下方按比例缩放，这就像一种魅力。

但现在我的设计师想为横向定位的手机添加一种格式(我同意他的观点是 nesacery，因为如果你将所有 div 放在彼此下面，联系页面会很长。所以他想出的是:

所以 div 1 和 2 在所有填写字段的下方。右边是信息 en 社交媒体图标。

但这里开始了我的问题。因为漂浮的元素会按顺序在彼此下面。这意味着 div2 将留在 div 2 旁边，而 div 3 将像这样位于 div 1 下方(箭头指向我要交换的 2:

有什么方法可以只使用 css 来改变它吗？我想出的解决方案是编写一个新代码，以解决这个问题的好方法，并在注册正确的横向模式之前不显示任何内容。但在我看来，对于这样的问题，这将是一个沉重的解决方案.所以无论如何有一个更好的主意:

这里有一个 fiddle :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 中是显示的每个框的位置。 aldo 是否交换右侧的框并不重要。

希望有人能帮帮我!

Answer 1

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

看到这个 FIDDLE (我在你的 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;
}

现在，如果您更改 fiddle 窗口的宽度，您将看到如果窗口宽度超过 760px，则 div 将全部正常对齐。如果窗口介于 760px 和 380px 之间，则会出现不良行为。如果窗口小于 190px，则所有 div 都相互依存。