如何实现在流体和固定div之间切换的2列布局？

Question

调整窗口大小时，A列应将其宽度缩小至50像素，但B列应保持固定宽度。从A列中删除50个像素后，它应该固定，然后B列应该开始收缩（无限制）。

在HTML代码中，A应该在B之前。由于响应式设计所需的要求，div需要按顺序排列。

<div id="ColumnA"></div>
<div id="ColumnB"></div>

这可以实现吗？

Answer 1

只是为了好玩，并且为了帮助我的js，我把这个用{j}做你想做的小FIDDLE放在一起。

JS

var startleftwidth   = 150;
var leftwidth        = 150;
var minleftwidth     = 101;
var startrightwidth  = 420;
var rightwidth       = 420;
var startwindowwidth = $(window).width();
var difference       = 0;

$(window).resize(function(){
  difference = $(window).width() - startwindowwidth;
  leftwidth  = startleftwidth + difference;
  if (leftwidth < minleftwidth)
     {
      setleftwidth(100);
      newrightwidth = rightwidth + difference + (startleftwidth - minleftwidth);
      setrightwidth(newrightwidth);
      }
       else
     {
      setleftwidth(leftwidth);
      setrightwidth(startrightwidth);
      }
  if (leftwidth > startleftwidth)
     {
      setleftwidth(startleftwidth);
      }
});

function setleftwidth(leftsize)
{
 $('.leftdiv').css('width', leftsize); 
}

function setrightwidth(rightsize)
{
 $('.rightdiv').css('width', rightsize); 
}