在響應模式下更改位置的div

Question

我的標題（A，B和C）中有3個元素，其中A和C是靜態圖像，B是文本的流體div。

當我縮小屏幕尺寸（或在移動設備上查看）時，我想要發生的事情是B降到兩個以下，而A和C保持原位 - 每個都位於屏幕的兩側。

看到下圖。

http://craigaranha.com/responsiveheader/

感謝

Answer 1

沒有看到你的代碼，我不能100％肯定你的CSS結構是什麼，但你可以用@media screen and (min-device-width: XXXpx) { }或@media screen and (min-width: XXXpx){ }啓動。他們會檢測設備的屏幕大小，並給你一些有條件的CSS規則。在那些規則中，如果你的右/左分區浮動，你可以浮動第三個並使用clear:both，或者你可以使用position: fixed; bottom: 0;。這真的取決於你的文檔結構和當前的CSS。但希望這給了你一個起點。

就我個人而言，我認爲position:fixed;將是一個快速和骯髒的解決方案太多，同樣會去position:absolute;。

Answer 2

將左框左移，右框右移，讓中框填充剩餘空間。然後當屏幕較小時，只需在中間框上添加clear:both即可使其下降。

事情是這樣的：

.left, .right { 
    width:50px; 
    height:50px; 
    text-align:center; 
    line-height:50px; 
} 
.left { 
    background-color:blue; 
    float:left; 
} 
.right { 
    background-color:magenta; 
    float:right; 
} 

.middle { 
    background-color:silver; 
    height:50px; 
    line-height:50px; 
} 

@media all and (max-width:800px) { 
    .middle { 
    clear:both; 
    } 
} 

假設類似這樣的標記：

<div class="left">A</div> 
<div class="right">C</div> 
<div class="middle">B is a fluid box of text.</div> 

Example codepen