css - 将 DIV 移动到相对于顶部 DIV 的底部底部

Question

我有以下场景

http://jsfiddle.net/EYGhf/63/

<div class="wrapper">
<div id="first_div">first div</div>
<div id="second_div">second div</div>
<div id="third_div">third div</div>    
</div>

我希望第三个 div 紧挨着第一个 div，第一个和第二个将在同一列中，如果正确的空间不可用，即在移动设备上，第三个 div 将 float 到底部。

当前应用的 CSS 为

.wrapper{
widht:250px;
}
#first_div {
background: yellow;
height: 200px; /* Just Example, Actual is Dynamic*/
width:100px;
float:left;
}

#second_div {
background: cyan;
height: 300px;/* Just Example, Actual is Dynamic*/
width:100px;
clear:left;    
}
#third_div{
width:100px;
float:left;
background:blue;
}

Answer 1

您可以在第 3 个元素上设置 position:absolute，并使用媒体查询将其设置回移动设备的 static。

JSFiddle 演示: http://jsfiddle.net/ytr1j3r7/ (调整输出帧的大小并查看)

body {
    margin: 0;
}
.wrapper {
    position: relative;
    max-width: 400px;
}
.wrapper > div {
    height: 100px;
    width: 200px;
}
#first_div {
    background: yellow;
}
#second_div {
    background: cyan;
}
#third_div {
    background: teal;
    position: absolute;
    top: 0;
    right: 0;
}
@media (max-width: 399px) {
    #third_div {
        position: static;
    }
}

<div class="wrapper">
    <div id="first_div">first div</div>
    <div id="second_div">second div</div>
    <div id="third_div">third div</div>
</div>