我试图水平对齐3张图片&因此,当用户在移动设备上访问网站时,图像变为垂直的。
由于对齐无法正常工作,我遇到了一些问题。由于某种原因,我的边界半径"财产不适用。
这是我的JSFiddle:http://jsfiddle.net/hxL7d0e1/
CSS:
#portfolio{
background-color: : white;
padding-bottom: 50px;
}
#portfolio h1{
font-size: 30px;
font-weight: 400px;
letter-spacing: 5px;
text-align: center;
color: #000;
}
#portfolio h2{
font-size: 15px;
letter-spacing: 2px;
text-align: center;
color: #000;
}
.project img{
padding: 50px;
width: 25%;
float: left;
border-radius: 12px;
}
答案 0 :(得分:0)
使用firefox调试器,我能够看到你的图像周围有很多空白区域。蓝色矩形在另一个更大的白色矩形内。你可以使用没有那个空白区域的图像吗?请参阅下面的图片链接;
https://upload.wikimedia.org/wikipedia/commons/c/cc/Rectangle_.png
你可以将整个页面的背景改为红色,你会看到正在谈论的内容。
答案 1 :(得分:0)
好在这里。堆叠是一个需要解决的简单问题。在这种情况下,我使用inline-block
显示将容器放在一行,并使用media
查询在屏幕尺寸小于700px时将其宽度更改为100%。
.project {
display:inline-block;
width: 33.33%;
margin-right:-4px;
}
@media only screen and (max-width:700px) {
.project {
width:100%;
}
}
对于border-radius
问题,您使用的是其中包含空格的示例图像,这会丢掉视觉效果。检查这个更新的小提琴,一切正常: