css - float 要素が落ちる問題を解決する方法

Question

こんな効果を実現したい

しかし、現在のコードは次のように書かれています

リーリー リーリー

解決方法を教えてください

幅の問題について多くの返信を読みましたが、幅を変更すると、pの背景画像が完全に表示されなくなります。写真を拡大縮小して幅を減らす方法はありますか？

Answer 1

最初の 2 つの幅を小さく設定します。おそらく幅が親要素の最大幅を超えており、改行が表示されるためです

Answer 2

3 つのサブ要素の幅: 33.333% のマージンをパディングに変更し、パーセンテージを使用してみてください。

Answer 3

理由 1: コンテンツ + マージンの幅が親要素の幅を超えているため、幅を変更してみることをお勧めします。
理由 2: すべての float: left の場合、この問題が発生しやすくなります。左が右、右が右です
お役に立てば幸いです

Answer 4

CSS の計算では、1+1>2 になることがよくあります。これには多くの理由が考えられます (境界線、改行スペースなど)。これに対処するより良い方法は、子ノードの幅を適切に減らすことです。

背景画像がブロックされる問題。p幅を変更した後、背景画像のサイズも同時に設定する必要があります(100%)。そうしないと、画像の実際のサイズに従って表示されます。

Answer 5

この属性の背景サイズ:100% 100%;

Answer 6

設定された幅が 100% を超えているため、次の行にオーバーフローします

Answer 7

コントロール p width、background-size:contain、解決されました。画像のアスペクト比が p と同じであれば、画像は変形しないはずです。