css - So lösen Sie das Problem des Herunterfallens von Float-Elementen

Question

Möchten Sie diesen Effekt erzielen

Aber der aktuelle Code ist so geschrieben

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

Bitte sagen Sie mir, wie ich es lösen kann

Ich habe viele Antworten zum Thema Breite gelesen. Nachdem ich die Breite geändert habe, wird das Hintergrundbild von p nicht vollständig angezeigt. Gibt es eine Möglichkeit, das Foto zu skalieren, um die Breite zu reduzieren?

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是相同的，图片应该不会变形。