相对于顶部 DIV 将 DIV 移至底部的右侧

Question

我有以下场景

<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，第一个和第二个将在同一列中，如果右侧 space 不可用，即在移动设备上，第三个 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 Demo: 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>

相对于顶部 DIV 将 DIV 移至底部的右侧

Move DIV to Right form Bottom with relative to Top DIV

css

css-float