搜索

首页  >  问答  >  正文

css - 如何解决float元素掉落的问题

想要实现这样的效果

但是目前代码写出来是这样的

    <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的背景图片就显示不全了 有没有方法可以让照片等比缩放减小宽度的

怪我咯怪我咯2744 天前1211

全部回复(7)我来回复

  • 迷茫

    迷茫2017-05-16 13:38:42

    将前两个的宽度设置小一些,应该是因为宽度超出父元素最大宽度,导致换行显示了

    回复
    0
  • 巴扎黑

    巴扎黑2017-05-16 13:38:42

    三个子元素width:33.333%试试 他们的margin改成padding 也用百分吧。

    回复
    0
  • 大家讲道理

    大家讲道理2017-05-16 13:38:42

    原因1:内容+边距 的宽度超出了父级元素的宽度,建议改变宽度试试
    原因2:全部float:left,容易出现这样的问题,一般是左边两个left,右边right
    希望能对你有帮助

    回复
    0
  • 淡淡烟草味

    淡淡烟草味2017-05-16 13:38:42

    在css计算中,很多时候是 1+1>2 ,可能的原因很多(如边框、换行空格等),比较好的处理方法是适当减少子节点的宽度。

    背景图片被遮挡的问题,在修改了p宽度后,背景图片的尺寸也要同步设置(100%),不然会按照图片实际的尺寸显示。

    回复
    0
  • ringa_lee

    ringa_lee2017-05-16 13:38:42

    这个属性background-size:100% 100%;

    回复
    0
  • 给我你的怀抱

    给我你的怀抱2017-05-16 13:38:42

    设置的宽度大于了100%导致溢出到下一行

    回复
    0
  • 某草草

    某草草2017-05-16 13:38:42

    控制p宽度,background-size:contain,解决。图片的长宽比例如果跟你的p是相同的,图片应该不会变形。

    回复
    0
  • 取消回复