css - 如何解決float元素掉落的問題

Question

想要實現這樣的效果

但是目前程式碼寫出來是這樣的

    <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");
    
}

求問該怎麼解決

看了很多的回覆說寬度的問題 我改變寬度之後 p的背景圖片就顯示不全了 有沒有方法可以讓照片等比縮放減小寬度的

Answer 1

將前兩個的寬度設定小一些，應該是因為寬度超出父元素最大寬度，導致換行顯示了

Answer 2

三個子元素width:33.333%試試 他們的margin改成padding 也用百分吧。

Answer 3

原因1：內容+邊距的寬度超出了父級元素的寬度，建議改變寬度試試
原因2：全部float：left，容易出現這樣的問題，一般是左邊兩個left，右邊right
希望能對你有幫助

Answer 4

在css計算中，很多時候是 1+1>2 ，可能的原因很多（如邊框、換行空格等），比較好的處理方法是適當減少子節點的寬度。

背景圖片被遮蔽的問題，在修改了p寬度後，背景圖片的尺寸也要同步設定（100%），不然會依照圖片實際的尺寸顯示。

Answer 5

這個屬性background-size:100% 100%;

Answer 6

設定的寬度大於了100%導致溢出到下一行

Answer 7

控制p寬度，background-size:contain，解決。圖片的長寬比例如果跟你的p是相同的，圖片應該不會變形。