如果 div 宽度变小则隐藏框

Question

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

我希望在从 n 到 0 调整大小时隐藏框，直到 none 仍然存在，只剩下固定的框。

在示例中，在 n 下降并被溢出隐藏后，我希望剩余的框向右移动，中间没有 space。

在此先感谢您。

我不知道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

大多数 CSS 解决方案 jQuery

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

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

这会处理除最后一个框以外的所有内容。

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

参见fiddle：http://fiddle.jshell.net/audetwebdesign/6o9rgmca/

如果 div 宽度变小则隐藏框

hide boxes if div width gets smaller

css

jquery

width

responsive-design