DIV浮動右浮動DIV左浮動

Question

嗨我有一個導航div，其底部有一個div。這個div有兩個其他divs「DIV 1」和「DIV 2」（見圖片）。現在，我在平板設備上關閉了導航，因此我將顯示包含浮點數的第二個div：位於包含float：left的第一個div上，如圖中所示。我怎樣才能做到這一點？現在第一個div已經結束了。謝謝。

Answer 1

您可以用Flexbox和媒體查詢這樣做只是改變第二個元素的order到order: -1，這裏是Fiddle

.nav { 
 
    height: 200px; 
 
    display: flex; 
 
    align-items: flex-end; 
 
    border: 1px solid black; 
 
} 
 
.one { 
 
    background: #5B9BD5; 
 
} 
 
.two { 
 
    background: #FF0000; 
 
} 
 
.div { 
 
    flex: 1; 
 
    padding: 10px 0; 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
    box-sizing: border-box; 
 
} 
 
@media(max-width: 480px) { 
 
    .nav { 
 
    flex-direction: column; 
 
    align-items: normal; 
 
    justify-content: flex-end; 
 
    } 
 
    .div { 
 
    flex: 0 0 50px; 
 
    } 
 
    .two { 
 
    order: -1; 
 
    } 
 
}

<div class="nav"> 
 
    <div class="div one">1</div> 
 
    <div class="div two">2</div> 
 
</div>

Answer 2

您可以使用media queries用於這一目的。

你可以在某些時候操縱你的div來改變他們的風格。

@media (max-width: 600px) { 
    #someElement { 
    float: left; 
    } 
} 

Answer 3

你可以嘗試以下方法，與媒體查詢沿800像素去除浮動：

的jsfiddle：https://jsfiddle.net/7ws3m9Lx/

CSS：

.div1,.div2 { width: 50%; } 
.div1 { float: left; } 
.div2 { float: right; } 

@media screen and (min-width: 0) and (max-width: 800px){ 
    .div1,.div2 { float: none; width: 100%; } 
} 

HTML：

<div class="parent"> 
    <div class="div2">DIV2</div> 
    <div class="div1">DIV1</div> 
</div>