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

Question

我正在尝试让我的页面在移动设备上每行显示3个图像链接，而不是当前显示的2个。 如果您在开发人员工具中以iPhone 5的形式查看此站点，则会看到每行有两个方形图像链接。 我想每行获取3张图像，但是不确定要更改为3条CSS规则。

我尝试修改各种Divs的宽度，但是这只会使图像链接变小，而没有使第三个对齐。

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;
  }
}