我一直在研究一种在主页上显示面板的方法,页面是响应式的,一开始所有的面板都是100%宽的,堆叠在一起,然后在某个断点,面板会分成两列。
我正在进行的工作在这里http://codepen.io/charge-valtech/pen/aIEGf
这可以很好地处理面板从左到右的优先顺序。然而,问题是这个页面需要是动态的,所以任何面板都可以“关闭”。因此,如果你去掉了第三个面板,由于浮动的工作方式,第四个面板会尝试向右移动,即使已经指定了float: left。
使用清除将它保持在左侧,但在第三个面板的位置会有一个间隙…
我希望这是有意义的,只是对其他人如何处理这个问题感兴趣。我在想,JavaScript可能是个不错的选择,但我真的不知道如何检测是否有空格。
干杯
发布于 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');
}
});
现在,这正是我想要它做的事情,如果它们合适的话,就把小部件粘在右边。
发布于 2013-01-24 12:17:27
使用CSS媒体查询:
@media (max-width: 1000px) {
#box-js {display:none}
}
仅当屏幕小于1000px时,才会执行#box-js
的CSS规则。
https://stackoverflow.com/questions/14499551
复制相似问题