响应对齐图像

时间:2018-06-10 21:12:16

标签: html css

我试图水平对齐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;
}

2 个答案:

答案 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问题,您使用的是其中包含空格的示例图像,这会丢掉视觉效果。检查这个更新的小提琴,一切正常:

http://jsfiddle.net/hxL7d0e1/2/