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

【问题标题】：How can I achieve a 2 column layout that switches between fluid and fixed divs?如何实现在流体和固定 div 之间切换的 2 列布局？
【发布时间】：2014-04-13 11:28:14
【问题描述】：

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

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

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

这可以实现吗？

【问题讨论】：

你开始的最大宽度是多少？
我不认为这可以用 CSS2.1 完成，可能你必须使用 CSS3 flexbox。
所以，你从 1140 开始，然后收缩。当你收缩时，Col A 收缩 50px，然后变得固定，此时 Col B 停止固定并开始收缩。两个初始大小是多少？
@AndyM 是的。 A 的初始大小应为 300 像素，B 应为 820 像素。 A 应该缩小到 250 像素然后固定，之后 B 开始缩小（无限）

标签： html css layout responsive-design

【解决方案1】：

只是为了好玩，为了帮助我的 js，我把这个小 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); 
}

【讨论】：