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

Responsive two column panel layout in priority order

本文关键字：两列 布局 顺序 优先级 响应      更新时间：2023-09-26

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

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

这很好地适用于按优先级顺序从左到右排列的面板。 但是，问题是此页面需要动态的，因此任何面板都可以"关闭"。 因此，如果您删除了第三个面板，由于浮点数的工作方式，第四个面板会尝试向右移动，即使已指定 float：left。

使用清除会让它保持在左边，但随后第三个面板会有一个间隙......

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

干杯

我想

我会为此分享我的解决方案，因为砖石对此有点矫枉过正，并且没有像我希望的那样干净

利落。

我的 css 左小部件和右小部件中有两个类，然后使用网格系统设置它们的宽度和浮动，这基本上使它们向左浮动和向右浮动以及 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');
                }
            });

现在，这完全符合我想要它的功能，如果适合，则将小部件粘在右侧。

使用 CSS 媒体查询：

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

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

相关文章：