需要在小屏幕上向右流动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/