想要实现这样的效果
但是目前代码写出来是这样的
<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的背景图片就显示不全了 有没有方法可以让照片等比缩放减小宽度的
大家讲道理2017-05-16 13:38:42
原因1:内容+边距 的宽度超出了父级元素的宽度,建议改变宽度试试
原因2:全部float:left,容易出现这样的问题,一般是左边两个left,右边right
希望能对你有帮助
淡淡烟草味2017-05-16 13:38:42
在css计算中,很多时候是 1+1>2 ,可能的原因很多(如边框、换行空格等),比较好的处理方法是适当减少子节点的宽度。
背景图片被遮挡的问题,在修改了p宽度后,背景图片的尺寸也要同步设置(100%),不然会按照图片实际的尺寸显示。