0

私のプロジェクトでは、フローティングされている複数のボタンがあります。デフォルトの状態では、使用していないボタンを非表示にする.hide()かdisplay:none、スクロールアウトしたいためです。

ここにすべてを説明するフィドルがありますFIDDLE

overflow:hiddenそれは私の心の中でうまくセットアップされています（ただし、他の提案にも開かれています）。ボタンを展開する最良の方法は、ボタンを非表示にするのではなく、ラッパーを0％に設定してから、表示したいときに展開するという結論に達しましたラッパー、これは 1 つの要素/オブジェクトでは問題ありませんが、複数の要素/オブジェクトがフローティングされると壊れます。なぜそれを行うのか、そして解決策が素晴らしいのか知りたいです。

再びここにフィドルがあります

私が作成したすばらしいフィドルを見たくない場合に備えて、いくつかのコードを示します。

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

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 に答える