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?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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
Three sub-elements width: 33.333%. Try changing their margin to padding and use percentage.
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
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.
This attribute background-size:100% 100%;
The set width is greater than 100%, causing it to overflow to the next line
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.