html - 需要在小屏幕上向左下方流动(右侧固定宽度，左侧可变宽度)

Question

我需要一个固定的右栏，左栏占用剩余空间。然后在移动设备上，两列都是全宽的，右列应该 float 在左边的 UNDER 下。

我关注了这个关于如何固定右列和可变宽度左列的 Stack 问题:make a div fill up the remaining width

这涉及我在 HTML 中将右列 div 移动到左列 div 上方。所以现在在较小的浏览器中，当我将两列都设置为 100% 宽度时，右侧 float 在左侧的上方，但我希望右侧的列 float 在下方/strong> 左边。

有什么要改变的想法吗？

<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；在宽屏和 display: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/