html - 如何在移动设备上每行获取 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;
  }
}