jquery - 使用 overflow hidden 隐藏 float 元素？

Question

在我的元素中，我有多个 float 按钮，在默认状态下，我想隐藏不使用 .hide() 或 display:none 的按钮，因为我想将它们滚动出来。

这是一个解释一切的 fiddle FIDDLE

它在我的脑海中设置得很好(尽管对其他建议持开放态度)，我得出的结论是展开按钮的最佳方法不是隐藏它们而是使用 overflow:hidden< 将包装器设置为 0% 然后，当我想显示它们时，我只是展开包装器，这对一个元素/对象没问题，但是当多个元素/对象 float 时，它就会中断。我想知道它为什么这样做以及解决方案会很棒。

这里又是一个 FIDDLE

只是一些代码，以防你不想看到我制作的精彩 fiddle 。

CSS:

.container {
    background-color: #333;
    padding: 10px 20px;
    width: 100%;
    overflow: hidden;
    margin: 25px 0;
    transition: 2s all ease;
}
.zero-width {
    width: 0%
}
.stationary-object {
    background-color: #eee;
    width: 200px;
    float: left;
    margin: 0 0 0 10px;
    color: #777; 
}

HTML:

<!-- It works with one object, not with two -->
<div class="container">
    <div class="stationary-object">I shouldnt move</div>
</div>

<!-- With objects floated it breaks, how do I get the floated objects to stay -->
<div class="container">
    <div class="stationary-object button">Button</div>
    <div class="stationary-object">I shouldnt move</div>
</div>

<button>Toggle Width</button>

jQuery:

$('button').click(function () {
    $(this).prevAll().toggleClass('zero-width')
})

代码是直接出炉的，它只是表示如何用 0% 隐藏 float 元素，overflow: hidden 绝不是这个实时代码。当我弄清楚如何防止 float 元素掉落时，我就可以将其应用到功能更强大的作品中。

谢谢

Answer 1

将 white-space: nowrap; 添加到您的 .container 类

并在您的 .stationary-object 类中将 float:left 替换为 display: inline-block;

FIDDLE

.container {
    background-color: #333;
    padding: 10px 20px;
    width: 100%;
    overflow: hidden;
    margin: 25px 0;
    transition: 2s all ease;
    white-space: nowrap; /* <-- */
}

.stationary-object {
    background-color: #eee;
    width: 200px;
    display: inline-block; /* <-- */
    margin: 0 0 0 10px;
    color: #777; 
}