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

Posted 2023-03-06

【中文标题】如果 div 宽度变小，则隐藏框

【英文标题】：hide boxes if div width gets smaller

【发布时间】：2015-07-03 02:18:27

【问题描述】：

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

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

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

提前谢谢你。

我不知道 javascript/jquery。

【问题讨论】：

你确实懂一点 jQuery，你做了一个 JSfiddle。我相信这可以在纯 CSS 中实现，不需要 JS。如果你想要一个没有间隙的完美布局，请查看 Flexbox 属性：css-tricks.com/snippets/css/a-guide-to-flexbox

@Kal-Ei，小提琴有误。我更新了它，它现在可以工作了

这应该可以使用纯 CSS 来实现。查看媒体查询:)

【参考方案1】：

主要是使用 jQuery 的 CSS 解决方案

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

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

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

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

见小提琴：http://fiddle.jshell.net/audetwebdesign/6o9rgmca/

【讨论】：

谢谢你，Marc，我把代码放在了fiddle.jshell.net/haubfwdc 中。最后一个框仍然显示在那里。你的答案是迄今为止最好的。

Box 1 是最后一个，最后只能有一个。固定的...和邓肯麦克劳德。谢谢你:)

感谢您的所有时间，马克！你是最好的！我不能投票赞成你的答案，因为我还没有 15 分的声誉。

@Kal-El 请检查更新的小提琴，我有一些非常接近您需要的东西，尤其是 jQuery 组件。

@Kal-El 如果它适合您，您仍然可以接受答案。祝你好运，欢迎来到 SO！

【参考方案2】：

首先，你可以检查.wrapper本身的宽度，不需要在里面包含window

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

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

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

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

查看更新的fiddle

【讨论】：

fiddle有什么区别？

@Manoz，小提琴有误。我更新了它，它现在可以工作了

还是一样。我想你没有得到这个问题。因为 OP 不希望 div 之间有空间。调整大小没有问题。

谢谢Manoz，你很细心，盒子之间还是有空格的。

@Kal-El 等等，问题只是空间吗？