0

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

这是一个解释一切的小提琴

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

这里又是一个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绝不是这个实时代码。当我可以弄清楚如何防止浮动元素掉落时，我可以将其应用于功能更强大的部分。

谢谢

4

4 回答 4

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;}
于 2013-10-07T19:46:01.367 回答
1

只需将文具对象包装在具有固定宽度的 div 中。见这个例子 - http://jsfiddle.net/taneleero/ZDnPa/5/

.hold-the-width {
    width:500px;
}
于 2013-10-07T19:46:43.723 回答
1

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

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

小提琴

.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; 
}
于 2013-10-07T19:49:15.903 回答
0

您可以将元素包装在 div 中，并将该 div 宽度设置为固定值

<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/

于 2013-10-07T19:52:16.867 回答