Question

我正在处理我的响应式网站，其中Html结构是这样的：

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

Div #First，＃Second＆amp; #Third有 float：left

因此，当浏览器宽度超过1280像素时，它们按以下顺序显示：

== 1 == 2 == 3 ==

＆安培;当浏览器宽度小于767px时，它们的宽度和宽度会缩小。根据我的css3媒体查询，它出现在另一个之下：

== 1 ==

== 2 ==

== 3 ==

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

== 1 ==

== 3 ==

== 2 ==

你可以看到DOM Structure Jsbin Here

如何使用纯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;
     }
}

您将其位置设置为相对位置并指定顶级属性。对于用第二个元素切换的第三个元素，你必须给它一个第二个元素高度的负顶值。然后你只需给第二个元素一个等于第三个元素高度的顶值。这将导致他们切换布局中的位置。

在CSS3媒体查询中使用float

3 个答案: