次のようなものがあります:
リーリー「フローティング」div がコンテナーからオーバーフローしても、互いの左側(cè)にフローティングするようにしたいと考えています。
フローティング div で「float:left」を使用しようとしましたが、機(jī)能しませんでした。それらは互いに積み重ねられます。
そこで、フロート要素に「display:inline-block」を使用し、コンテナーに「white-space:nowrap」を使用する回避策を見つけました。それは機(jī)能しましたが、私の場(chǎng)合は役に立ちませんでした。
リーリー実際、「white-space:nowrap」により、テキストがフローティング div で畫像をラップすることができなくなります。これは本來の目的でした。 「white-space:nowrap」は本來の動(dòng)作を行うため、このトリックはコンテンツを div 內(nèi)にラップすることに関心がない場(chǎng)合にのみ機(jī)能すると思われます。しかし、この場(chǎng)合はそうしました。
つまり、要約すると、屬性を空白のままにすると、2 つの div は正常にフロートしますが、その中のコンテンツはめちゃくちゃになります。この屬性を使用しない場(chǎng)合、div 內(nèi)のコンテンツは保持されますが、div はフロートしません。
https://jsfiddle.net/8n0um9kz/
欲しいものを手に入れることができる解決策はありますか?
###ありがとう。PS: この例では両方の浮動(dòng) div に 66% の幅を使用したので、説明のために両方を確認(rèn)できます。私の知る限り、もちろんそれらはすべて100%です。
###はい。解決策はあります。
コンテナで 'white-space : no-wrap' を使用する代わりに、
'display : flex' および 'flex-wrap :wrap' を使用できます。コンテナではアイテムが許可されますコンテナの終わりに達(dá)したら次の行に進(jìn)みます。さらに 'justify-content : flex -start' を使用します。
これが私が理解した方法です。
リーリー重要なのは、コンテナーで「width」と「display:flex」の代わりに「min-width」を使用することです。
表示、フロートの削除、コンテンツのサイズ変更、ラップ/展開にブロックを使用する必要はありません。
"align-items: flex-start" は、浮動(dòng) div がそれぞれの高さを維持する必要がある場(chǎng)合にのみ必要です。そうでない場(chǎng)合は、最も高い div の高さが使用されます。フローティング div にコンテナとは異なる背景色を使用しない限り、これは問題にはなりません。
###ありがとう。