在 CSS3 媒体查询中使用浮动

Question

我正在我的响应式网站上工作，其中 Html 结构如下：

<div id="container">
    <div id="first">FIRST</div>
    <div id="second">SECOND</div>
    <div id="third">THIRD</div> 
</div>

Div #First、#Second & #Third 有 float : left

因此，当浏览器宽度超过 1280px 时，它们按以下顺序出现：

== 1 == 2 == 3 ==

&当浏览器宽度小于 767px 时，它们会缩小宽度并缩小宽度。根据我的 css3 媒体查询，一个出现在另一个下面：

== 1 ==

== 2 ==

== 3 ==

我想要实现的是，当浏览器宽度小于 767px 时，它们的顺序应该是：

== 1 = =

== 3 ==

== 2 ==

可以看到DOM结构 Jsbin 这里

我怎样才能用纯CSS3实现这一点？

Answer 1

尝试将第三个和第二个向右浮动并按照您想要的方式重新排序它们，这里是 jsbin

#first, #third {width:250px;height: 200px;background: #aaa;float: left;text-align: center}
#second {width: 460px;height: 200px;background: #ddd;float: left;text-align: center}
#third, #second { float:right;}

Html：

<div id="first">FIRST</div>
<div id="third">THIRD</div>
<div id="second">SECOND</div>

Answer 2

你还不能用 CSS 做到这一点......

如果任何浏览器支持高级布局模块，您可以这样做：

/* Default to small size */
#container {display: "a" "b" "c"}
#first {position: "a"}
#second {position: "c"}
#third {position: "b"}

/* Move #third to bottom on slightly larger resolutions */
@media only screen and (min-width: 768px) {
    #first {position: "a"}
    #second {position: "b"}
    #third {position: "c"}
}

/* Display side by side on even larger resolutions */
@media only screen and (min-width: 992px) {
    #container {display: "abc"}
    #first {position: "a"}
    #second {position: "b"}
    #third {position: "c"}
}

Answer 3

好吧，这个解决方案依赖于知道每个 div 的高度。如果您事先不知道高度，则需要使用 javascript 来获取高度并在那里应用您的更改。

代码如下：

    @media only screen and (min-width: 480px) and (max-width: 767px)
{
    #container {width: 300px;}
    #first{width:300px;height: 200px;}
    #second {
        width: 300px;
        height: 200px;
        top: 200px;
        position: relative;
    }
     #third {
     background: blue;
     position: relative; 
     width: 300px; 
     height: 200px;
     top: -200px;
     }
}

将它们的位置设置为相对位置并指定 top 属性。为了使第三个元素与第二个元素切换，您必须为其指定第二个元素高度的负顶部值。然后，您只需为第二个元素指定一个等于第三个元素高度的顶部值即可。这将导致它们在您的布局中交换位置。