Question

我一直在研究在主页上显示面板的方法，页面是响应性的，并且从所有面板100％宽并堆叠开始，然后在某个断点处，面板将分成两列。

我正在进行中的工作http://codepen.io/charge-valtech/pen/aIEGf

这适用于从左到右按优先顺序流动的面板。然而问题是这个页面需要是动态的，所以任何面板都可以“关闭”。因此，如果你摆脱了第三个面板，由于浮动的工作方式，第四个面板试图向右移动，即使指定了float：left。

使用清算会将其保留在左侧，但是第三个面板会出现间隙......

我希望这是有道理的，并且只对其他人如何处理问题感兴趣。我认为JavaScript可能是要走的路，但不知道如何检测是否有可用的空白区域。

干杯

Answer 1

我以为我会为此分享我的解决方案，因为砌筑有点矫枉过正，并没有像我希望的那样干净利落。

我的css left-widget和right-widget中有两个类，然后使用网格系统设置它们的宽度和浮动，这实际上使它们向左浮动并向右浮动并且49.something％width。

默认情况下，我为所有小部件提供了左侧窗口小部件类，然后使用一些jquery我这样做：

$('.left-widget').each(function (index, value) {
                var widgetPosition = $(this).position().left;
                if (widgetPosition >= 30) {
                    $(this).removeClass('left-widget').addClass('right-widget');
                }
            });
            $('.right-widget').each(function (index, value) {
                var widgetPosition = $(this).position().left;
                if (widgetPosition <= 30) {
                    $(this).removeClass('right-widget').addClass('left-widget');
                }
            });

现在这正是我想要它做的事情，如果它们适合的话，将小部件固定在右侧。

Answer 2

使用CSS媒体查询：

@media (max-width: 1000px) {
   #box-js {display:none}
}

#box-js的CSS规则仅在屏幕低于1000px时执行。

响应两个列面板布局按优先级顺序排列

2 个答案: