0

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

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

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

使用清除将其保持在左侧，但是第三个面板的位置会有一个间隙......

我希望这是有道理的，并且只是对其他人如何解决这个问题感兴趣。我在想 JavaScript 可能是要走的路，但真的不知道如何去检测是否有可用的空白。

干杯

4

2 回答 2

1

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

我的 css left-widget 和 right-widget 中有两个类，然后使用网格系统设置它们的宽度和浮动，这基本上使它们向左浮动和向右浮动以及 49.something% 宽度。

默认情况下，我为所有小部件提供 left-widget 类，然后使用一些 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');
                }
            });

现在，这正是我想要它做的，如果它们合适的话，把小部件贴在右边。

于 2013-02-07T10:48:34.023 回答
-1

使用 CSS 媒体查询：

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

#box-js仅当屏幕小于 1000px 时才会执行CSS 规则。

于 2013-01-24T12:17:26.983 回答