需要在小屏幕上向右流動UNDER左側（固定寬度右側，左側可變寬度）

Question

我需要固定的右側列，左側列佔據剩餘空間。然後在移動兩列將是全寬，並且右列應浮動左側UNDER。

我跟着就如何使右側立柱固定這個堆棧問題，左列可變寬度：make a div fill up the remaining width

這涉及到我的移動右列格在HTML左欄DIV以上。所以現在在較小的瀏覽器中，當我將兩列的寬度都做成100％時，右側浮動左邊的以上，但是我想右邊的列浮動下的左邊。

關於如何改變的想法？

<div id="main"> 
    <div id="primary"> 
    left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/> 
    </div> 
    <div id="container"> 
    middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div <br />bit taller 
    </div> 
</div> 

#main { 
    width: 100%; 
} 
#primary { 
    width: 100px; 
    float: right; 
    background-color: #fcc; 
} 
#container { 
    background-color: #cfc; 
    overflow: auto; 
} 

@media screen and (max-width: 500px) { 
    #primary, #container{ 
     width: 100%; 
    } 
    #primary{ 
     float:none; 
    } 
} 
} 

https://jsfiddle.net/8pk4K/2157/

Answer 1

1;首先將容器放入HTML標記中，然後放入固定寬度的div。

2;設置要顯示的元素：table-cell;在寬屏幕上顯示：block;在狹窄的屏幕

#main { 
    width: 100%; 
} 
#primary { 
    width: 100px; 
    display:table-cell; 
    background-color: #fcc; 
} 
#container { 
    display:table-cell; 
    background-color: #cfc; 
    overflow: auto; 
} 

@media screen and (max-width: 500px) { 
    #primary, #container{ 
     width: 100%; 
    } 
    #container{ 
     display:block; 
    } 
    #primary{ 
     display:block; 
     width:100%; 
    } 
} 

https://jsfiddle.net/Nillervision/hpsnqs60/

Answer 2

你貼什麼彩車「初級」向右&給它一個固定的寬度，即使你把它稱爲「左格左格左格。」這與你上面解釋的相反。在小屏幕上，它應該首先放置「主要」，然後按照它們在HTML中出現的順序放置「容器」，這正是發生的情況。

給出一個寬度（百分比作品）和相應的浮動。最簡單的解決方法是交換HTML命令......

https://jsfiddle.net/8pk4K/2159/

#main { 
    width: 100%; 
} 
#primary { 
    width: 10%; 
    float: right; 
    background-color: #fcc; 
} 
#container { 
    background-color: #cfc; 
    width: 90%; 
    overflow: auto; 
    float:left; 
} 

@media screen and (max-width: 500px) { 
    #primary, #container{ 
     width: 100%; 
    } 
    #primary{ 
     float:none; 
    } 
} 
} 

<div id="main"> 

     <div id="container"> 
     middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div <br />bit taller 
     </div> 
     <div id="primary"> 
     left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/> 
     </div> 
    </div> 

Answer 3

也許試試這個：

HTML

<div id="main"> 
    <div id="container"> 
    middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div <br />bit taller 
    </div 
    ><div id="primary"> 
    left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/> 
    </div> 
</div> 

注意， 「容器」 DIV的原因關閉標籤被擴展出來是因爲容器和主div之間不能有任何空格，否則會有額外的空間它們之間。

CSS

#main { 
    width: 100%; 
} 
#primary { 
    width: 100px; 
    right: 0px; 
    background-color: #fcc; 
    display: inline-block; 
} 
#container { 
    vertical-align: top; 
    display: inline-block; 
    background-color: #cfc; 
    overflow: auto; 
    top: 0px; 
    left: 0px; 
    width: calc(100% - 100px); 
} 

@media screen and (max-width: 500px) { 
    #primary, #container{ 
     width: 100%; 
    } 
} 
} 

Answer 4

你肯定希望把右列第二位的HTML。之後，有許多方法可以完成CSS所需的工作。

一種方式來做到這一點是使用絕對定位在右列中，父元素加入padding-right：

#main { 
 
    position: relative; 
 
    padding-right: 100px; 
 
} 
 
#primary { 
 
    width: 100px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    background-color: #fcc; 
 
} 
 
#container { 
 
    background-color: #cfc; 
 
} 
 

 
@media screen and (max-width: 500px) { 
 
    #main { 
 
    padding-right: 0; 
 
    } 
 
    #primary, #container{ 
 
    width: auto; 
 
    } 
 
    #primary{ 
 
    position: static; 
 
    } 
 
}

<div id="main"> 
 
    <div id="container"> 
 
    middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div middle div <br />bit taller 
 
    </div> 
 
    <div id="primary"> 
 
    left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/> 
 
    </div> 
 
</div>

jsfiddle.net/8pk4K/2160

Answer 5

我與更新的小提琴幾行javascript也是。

將計劃分配爲absolute。

這裏是小提琴 - https://jsfiddle.net/8pk4K/2162/