html - 列响应行为和故障。在移动设备上显示 2x3 与 1x6 列(HTML 访问受限)

Question

我使用的是 Avada Fusion 主题，因此我对编辑核心主题 HTML 文件的访问权限有限。

不过，我可以访问自定义 CSS。

我无法让以下列在 800 像素媒体屏幕下的移动设备上显示为 2x3 而不是 1x6:

IMAGE showing mobile view of issue

这是显示问题的页面(2017 年 6 月 20 日)请务必切换到移动 View :

https://zeralynx.co.uk

这是我正在使用的 CSS，所有 6 列都具有相同的 ID 选择器“home-product-tiles”:

@media only screen and (max-width: 800px) {
#home-product-tiles {
    width: 47% !important;
    display: inline !important;
    float: left !important;
    margin-right: 2% !important;
    overflow: hidden !important;
}
}

我不明白为什么第 4 列(在桌面 View 中第二行的第一列)不会 float 到第 3 列(在桌面 View 中第一行的最后一个)的右侧.

请帮助我，我将不胜感激，我敢打赌这很容易解决!

问候，扎克

Answer 1

那是因为您的列的高度不相等。也不要同时使用 display:inline 和 float:left 。他们本质上是在做同样的事情。

您可以使用 display:flex 来使列的高度相等。请参阅下面的示例片段

wrapper {
  display: flex;
  flex-wrap: wrap;
}

div {
  float: left;
  width: 49%;
  margin-right: 2%;
  display: inline;
}

div:nth-child(even) {
  margin-right: 0;
}

<wrapper>
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h2>
Some text
</h2>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x250">
    <h2>Some text</h2>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x50">
    <h2>Some text</h2>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x450">
    <h2>Some text</h2>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h2>Some text</h2>
  </div>
</wrapper>