固定幅のない水平レイアウトでフローティングコンテンツを残しました

Question

私は自分のウェブサイトを構築する友人を助けています。私自身はウェブデザインに関しては半分アマチュアです。その結果、通常は数時間のGoogle検索で解決される無数の不満が生じます。しかし、今回はありません。私は実際には、既存の答えを見つけ出すのに苦労しました。ポイントへの

：Here's a working example of how far I have got yet

「メニュー」の各文字は、彼らが写真/スライドを含むプロジェクト-divを切り替えますクリックし、作業の一部を表しています。

• すべてのproject-divは、下の行に折り返さずに水平に配置します。これは私の現在の星座と一緒に働いています。

• 私はアクティブ化されたプロジェクトを左に浮かしたり、整列させたいと思っています（container-divが許す限り）。

  'A'をトグルすると、最初のプロジェクトがうまくポップアップし、それ自体が左に揃えられます。続いて 'B'がトグルされると、それはまた、うまくいけば、それ自体を左に揃え、プロジェクト「A」に対して傾けます。同じことが、「C」+「D」を連続的にトグルすることになります。

  問題は、最初の選択肢として「D」を切り替えると開始されます。ここでは、プロジェクトの左側に予想よりも多くの空白が表示されます。また、 'A'と 'D'を切り替えると、プロジェクト間に奇妙な空白ができます。

お手伝いが必要ですか？

.child{ 
    float:left; 
    margin-right:10px; 
    display: inline-block; 
    white-space: nowrap; 
} 

と親のdiv（#parent）幅に項目がトグルされるたびに与える：「.child」要素に次のスタイルを追加

Answer 1

してみてください。したがって、アイテムが追加されるたびに、幅が#parentの幅に追加され、水平スクロールが可能になります。

これが役に立ちます。