Question

我在这里做了一个例子：http://fiddle.jshell.net/0yn7sbbr/4/

我希望在从n到0的大小调整中隐藏这些框，直到没有剩余，只剩下固定的框。

在示例中，在n关闭并隐藏溢出之后，我希望剩下的框移动到右边，中间没有空格。

先谢谢你。

我不知道javascript / jquery。

Answer 1

首先，您只需检查.wrapper本身的宽度，无需在其中加入window

if ($('.wrapper').width() < 52)

其次，在调整大小处理程序本身中包含if条件

$(window).on('resize', function(){
    $('#widthSpan').html($('.wrapper').width());

   if ($('.wrapper').width() < 52) {
     $('div.wrapper').hide();
   }
});

查看更新的fiddle

Answer 2

主要使用jQuery的CSS解决方案

我不使用.box的浮点数，而是使用内联块并使用text-align: right来保持它们齐平。

请注意.box元素之间的额外空格，但可以通过标记中的删除和空格字符轻松修复HTML代码。

除了最后一个方框外，它还可以处理所有内容。

要隐藏最后一个框，您需要使用JavaScript / jQuery。

请参阅小提琴：http://fiddle.jshell.net/audetwebdesign/6o9rgmca/

如果div宽度变小，则隐藏框

2 个答案: