如何在移动设备上获得每行3个图像链接而不是2个图像链接

Question

我试图让我的页面在移动设备上显示每行3个图像链接，而不是两个，这是目前显示的内容。如果您在开发人员工具中将此网站视为iPhone 5，则您会发现每行有两个方形图像链接。我想每行获得3张图片，但我不确定要改变的CSS规则是什么。

我尝试修改各种Div的宽度，但它只是使图像链接更小，并没有使第三个更上一层。

http://50.87.248.154/~thetinat/search/

如果我能澄清任何事情，请告诉我。谢谢！

Answer 1

您需要将宽度缩小为：width: 29%;并关闭clear: both;类上的odd。

像这样：

.odd {
  clear: none;
  float: left;
}

.recipes-bottom .featuredpost .post {
  width: 29%;
  margin: 20px 5px 0px;
}
@media (max-width: 480px) {
  .recipes-bottom article, .home-middle article {
    float: none;
    clear: none;
    display: inline-block;
    height: 150px;
    vertical-align: middle;
  }
}