Question

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

这是一个解释所有内容的小提琴FIDDLE

它在我的脑海中设置得很好（尽管可以接受其他建议），我得出的结论是，扩展按钮的最佳方法不是隐藏它们，而是使用overflow:hidden将包装器设置为0％然后当我想显示它们我只是展开包装器，这对于一个元素/对象很好，但是当多个元素/对象浮动时它会中断。我想知道为什么它这样做，解决方案会很精彩。

这里再次是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％和overflow: hidden的浮动元素，这绝不是这个实时代码。当我能弄清楚如何防止浮动元素掉落时，我可以将其应用于更具功能性的部分。

谢谢

Answer 1

您可以添加宽度非常大的内部<div>，这样可以将固定对象按钮保持在一条线上而不会包裹。 http://jsfiddle.net/ZDnPa/2/

<div class="container">
    <div class="inner">
        <div class="stationary-object button">Button</div>
        <div class="stationary-object">I shouldnt move</div>
    </div>
</div>

.inner {width:10000px;}

Answer 2

将信纸对象包装在具有固定宽度的div中。请参阅此示例 - http://jsfiddle.net/taneleero/ZDnPa/5/

.hold-the-width {
    width:500px;
}

Answer 3

将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; 
}

Answer 4

您可以将元素包装在div中，并将divs width设置为固定值

<div class="container">
<div class="fixed">
    <div class="stationary-object button">Button</div>
    <div class="stationary-object">I shouldnt move</div>
</div>

.fixed{width:450px;}

更新小提琴

http://jsfiddle.net/ZDnPa/8/

使用隐藏溢出来隐藏浮动元素？

4 个答案: