将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将在同一列中，如果右侧空间不可用，即在移动设备上，第三个div将浮动到底部。

应用的当前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>