こんな効果を実現したい
しかし、現在のコードは次のように書かれています
解決方法を教えてください
幅の問題について多くの返信を読みましたが、幅を変更すると、pの背景画像が完全に表示されなくなります。写真を拡大縮小して幅を減らす方法はありますか？
走同样的路，发现不同的人生
最初の 2 つの幅を小さく設定します。おそらく幅が親要素の最大幅を超えており、改行が表示されるためです
3 つのサブ要素の幅: 33.333% のマージンをパディングに変更し、パーセンテージを使用してみてください。
理由 1: コンテンツ + マージンの幅が親要素の幅を超えているため、幅を変更してみることをお勧めします。 理由 2: すべての float: left の場合、この問題が発生しやすくなります。左が右、右が右ですお役に立てば幸いです
CSS の計算では、1+1>2 になることがよくあります。これには多くの理由が考えられます (境界線、改行スペースなど)。これに対処するより良い方法は、子ノードの幅を適切に減らすことです。
背景画像がブロックされる問題。p幅を変更した後、背景画像のサイズも同時に設定する必要があります(100%)。そうしないと、画像の実際のサイズに従って表示されます。
この属性の背景サイズ:100% 100%;
設定された幅が 100% を超えているため、次の行にオーバーフローします
コントロール p width、background-size:contain、解決されました。画像のアスペクト比が p と同じであれば、画像は変形しないはずです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
最初の 2 つの幅を小さく設定します。おそらく幅が親要素の最大幅を超えており、改行が表示されるためです
3 つのサブ要素の幅: 33.333% のマージンをパディングに変更し、パーセンテージを使用してみてください。
理由 1: コンテンツ + マージンの幅が親要素の幅を超えているため、幅を変更してみることをお勧めします。
理由 2: すべての float: left の場合、この問題が発生しやすくなります。左が右、右が右です
お役に立てば幸いです
CSS の計算では、1+1>2 になることがよくあります。これには多くの理由が考えられます (境界線、改行スペースなど)。これに対処するより良い方法は、子ノードの幅を適切に減らすことです。
背景画像がブロックされる問題。p幅を変更した後、背景画像のサイズも同時に設定する必要があります(100%)。そうしないと、画像の実際のサイズに従って表示されます。
この属性の背景サイズ:100% 100%;
設定された幅が 100% を超えているため、次の行にオーバーフローします
コントロール p width、background-size:contain、解決されました。画像のアスペクト比が p と同じであれば、画像は変形しないはずです。