「white-space:nowrap」なしで div に float:left を強制する

Question

次のようなものがあります:

リーリー

「フローティング」div がコンテナーからオーバーフローしても、互いの左側にフローティングするようにしたいと考えています。

フローティング div で「float:left」を使用しようとしましたが、機能しませんでした。それらは互いに積み重ねられます。

そこで、フロート要素に「display:inline-block」を使用し、コンテナーに「white-space:nowrap」を使用する回避策を見つけました。それは機能しましたが、私の場合は役に立ちませんでした。

リーリー

実際、「white-space:nowrap」により、テキストがフローティング div で画像をラップすることができなくなります。これは本来の目的でした。 「white-space:nowrap」は本来の動作を行うため、このトリックはコンテンツを div 内にラップすることに関心がない場合にのみ機能すると思われます。しかし、この場合はそうしました。

つまり、要約すると、属性を空白のままにすると、2 つの div は正常にフロートしますが、その中のコンテンツはめちゃくちゃになります。この属性を使用しない場合、div 内のコンテンツは保持されますが、div はフロートしません。

https://jsfiddle.net/8n0um9kz/

欲しいものを手に入れることができる解決策はありますか?

＃＃＃ありがとう。

PS: この例では両方の浮動 div に 66% の幅を使用したので、説明のために両方を確認できます。私の知る限り、もちろんそれらはすべて100％です。

Answer 1

＃＃＃はい。解決策はあります。

コンテナで 'white-space : no-wrap' を使用する代わりに、

'display : flex' および 'flex-wrap :wrap' を使用できます。コンテナではアイテムが許可されますコンテナの終わりに達したら次の行に進みます。さらに 'justify-content : flex -start' を使用します。

Answer 2

これが私が理解した方法です。

リーリー

重要なのは、コンテナーで「width」と「display:flex」の代わりに「min-width」を使用することです。

表示、フロートの削除、コンテンツのサイズ変更、ラップ/展開にブロックを使用する必要はありません。

"align-items: flex-start" は、浮動 div がそれぞれの高さを維持する必要がある場合にのみ必要です。そうでない場合は、最も高い div の高さが使用されます。フローティング div にコンテナとは異なる背景色を使用しない限り、これは問題にはなりません。

https://jsfiddle.net/b83rzL07/1/

＃＃＃ありがとう。