html - 响应式对齐图像

Question

我正在尝试水平和响应地对齐 3 张图像，以便当用户在移动设备上访问该网站时图像变为垂直。

我遇到了一些问题，因为对齐不能正常工作，并且出于某种原因我的“border-radius”属性没有应用。

这是我的 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;
}

Answer 1

好的，就在这里。堆叠是一个很容易解决的问题。在这种情况下，我使用了 inline-block display 来让容器排成一行，并使用 media 查询将它们的宽度更改为 100% 在小于 700px 的屏幕尺寸上.

.project {
  display:inline-block;
  width: 33.33%;
  margin-right:-4px;
}
@media only screen and (max-width:700px) {
  .project {
    width:100%;
  }
}

对于 border-radius 问题，您使用的示例图像中有空白，这会影响视觉效果。检查这个更新的 fiddle 是否一切正常:

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