按优先级顺序响应两列面板布局
按优先级顺序响应两列面板布局
提问于 2013-01-24 10:51:48
我一直在研究一种在主页上显示面板的方法，页面是响应式的，一开始所有的面板都是100%宽的，堆叠在一起，然后在某个断点，面板会分成两列。
我正在进行的工作在这里http://codepen.io/charge-valtech/pen/aIEGf
这可以很好地处理面板从左到右的优先顺序。然而，问题是这个页面需要是动态的，所以任何面板都可以“关闭”。因此，如果你去掉了第三个面板，由于浮动的工作方式，第四个面板会尝试向右移动，即使已经指定了float: left。
使用清除将它保持在左侧，但在第三个面板的位置会有一个间隙…
我希望这是有意义的，只是对其他人如何处理这个问题感兴趣。我在想，JavaScript可能是个不错的选择，但我真的不知道如何检测是否有空格。
干杯
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-02-07 10:48:34
我想我应该分享我对此的解决方案，因为砖石工程对此有点过度，而且没有像我希望的那样干净。
我在css中有两个类-- left-widget和right-widget，然后使用网格系统设置它们的宽度和浮点数，这基本上给了它们向左浮动和向右浮动和49.thing%的宽度。
默认情况下，我为所有小部件提供了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');
}
});现在，这正是我想要它做的事情，如果它们合适的话，就把小部件粘在右边。
Stack Overflow用户
发布于 2013-01-24 12:17:27
使用CSS媒体查询：
@media (max-width: 1000px) {
#box-js {display:none}
}仅当屏幕小于1000px时，才会执行#box-js的CSS规则。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14499551
复制
相似问题
响应两列布局(列表和详细信息面板)
响应式两列布局
按优先级顺序折叠窗口上的WPF面板
两列响应式css布局
PySpark按顺序连接两列
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
