css - How to solve the problem of float elements falling

Question

Want to achieve this effect

But the current code is written like this

    <p class="main">
     <p class="left"></p>
     <p class="center"></p>
     <p class="right"></p>
    </p>

.main{

    margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;

}

.left{
    width: 5rem;
    height: 3rem;
    float: left;
    margin: 2rem;
    background-image: url("/templates/CeHua/images/new01.jpg");

}
.center{
    width: 5rem;
    height: 3rem;
    float: left;
    margin: 2rem;
    background-image: url("/templates/CeHua/images/new02.jpg");
}
.right{
    width: 5rem;
    height: 3rem;
    float: left;
    margin: 2rem;
    background-image: url("/templates/CeHua/images/new03.jpg");
    
}

How should I solve it

I read a lot of replies about the width problem. After I change the width, the background image of p is not fully displayed. Is there a way to scale the photo to reduce the width?

Answer 1

Set the width of the first two smaller, probably because the width exceeds the maximum width of the parent element, causing line breaks to be displayed

Answer 2

Three sub-elements width: 33.333%. Try changing their margin to padding and use percentage.

Answer 3

Reason 1: The width of the content + margin exceeds the width of the parent element. It is recommended to try changing the width.
Reason 2: All float: left, this problem is prone to occur, usually the two left on the left and the right on the right
Hope it can Helpful for you

Answer 4

In CSS calculations, it is often 1+1>2. There are many possible reasons (such as borders, newline spaces, etc.). A better way to deal with it is to appropriately reduce the width of the child nodes.

The problem of the background image being blocked. After modifying the p width, the size of the background image must also be set simultaneously (100%), otherwise it will be displayed according to the actual size of the image.

Answer 5

This attribute background-size:100% 100%;

Answer 6

The set width is greater than 100%, causing it to overflow to the next line

Answer 7

Control p width, background-size:contain, solved. If the aspect ratio of the image is the same as your p, the image should not be deformed.