html - 如何响应地混合奇数列和偶数列，所有列保持相同的高度

Question

我需要构建一个响应式布局，从桌面上的 3 x 2 布局到移动设备上的 2 x 3 布局。

这是我的 HTML 布局的基本示例

<section class="itineraries-hub__categories">
  <div class="row">
    <div class="small-6 x-large-4 columns">
      ...
    </div>
    <div class="small-6 x-large-4 columns">
      ...
    </div>
    <div class="small-6 x-large-4 columns">
      ...
    </div>
  </div>
  <div class="row">
    <div class="small-6 x-large-4 columns">
      ...
    </div>
    <div class="small-6 x-large-4 columns">
      ...
    </div>
    <div class="small-6 x-large-4 columns">
      ...
    </div>
  </div>
</section>

现在我可以想象你们很多人在想，为什么我不去掉 2 行并有 1 个大行，这是一个有效的问题，尽管我需要让每一列的高度与我的高度完全相同我正在处理 display:table 和 display:table-cell。这就是为什么我的 HTML 是这样的布局。

然后我考虑使用 Flexbox，我相信你们都在想，问题是我必须支持 IE9，这意味着我不能在桌面上使用 flexbox。我非常愿意将它用于移动设备。

请记住，我不能在桌面上使用 Flexbox，并且所有列的高度必须相同，这就是我被卡住的地方。请在下面查看我的完整 HTML 和 CSS

.row {
  display: table;
  width: 100%;
}
.columns {
  display: table-cell;
  width: 33.4%;
}
.category__link {
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.category__image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: url(/assets/images/resources/blank.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
img {
  position: absolute;
}
.category__title {
  display: block;
  background: #323945;
  color: white;
  font-weight: 400;
  font-family: 'MuseoSansW01-Rounded900', sans-serif;
  font-size: 16px;
  line-height: 2;
  padding: 18px 14px 14px 26px;
  overflow: hidden;
}
.category__tag {
  float: right;
  display: inline-block;
  padding: 6px 12px;
  margin-top: -1px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
  background: black;
  text-transform: uppercase;
  font-weight: 400;
  font-family: 'Proxima Nova W08 Reg', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-family: 'Proxima Nova W08 Bd', sans-serif;
  font-size: 13px;
}
@media only screen and (max-width: 500px) {
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  .columns {
    display: flex;
    width: 50%;
  }
}

<section class="itineraries-hub__categories">
  <div class="row">
    <div class="small-6 x-large-4 columns">
      <a class="category__link">
        <div class="category__image-container">
          <img src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/landscapes/article images/w1400_a_new landscape_main.jpg">
        </div>
        <span class="category__title">
          Discover dramatic scenes
          <span class="category__tag">Explore</span>
        </span>
      </a>
    </div>
    <div class="small-6 x-large-4 columns">
      <a class="category__link">
        <div class="category__image-container">
          <img src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/landscapes/article images/w1400_a_new landscape_main.jpg">
        </div>
        <span class="category__title">
          Discover dramatic scenes
          <span class="category__tag">Explore</span>
        </span>
      </a>
    </div>
    <div class="small-6 x-large-4 columns">
      <a class="category__link">
        <div class="category__image-container">
          <img src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/landscapes/article images/w1400_a_new landscape_main.jpg">
        </div>
        <span class="category__title">
          Discover dramatic scenes
          <span class="category__tag">Explore</span>
        </span>
      </a>
    </div>
  </div>
  <div class="row">
    <div class="small-6 x-large-4 columns">
      <a class="category__link">
        <div class="category__image-container">
          <img src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/landscapes/article images/w1400_a_new landscape_main.jpg">
        </div>
        <span class="category__title">
          Discover dramatic scenes
          <span class="category__tag">Explore</span>
        </span>
      </a>
    </div>
    <div class="small-6 x-large-4 columns">
      <a class="category__link">
        <div class="category__image-container">
          <img src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/landscapes/article images/w1400_a_new landscape_main.jpg">
        </div>
        <span class="category__title">
          Discover dramatic scenes
          <span class="category__tag">Explore</span>
        </span>
      </a>
    </div>
    <div class="small-6 x-large-4 columns">
      <a class="category__link">
        <div class="category__image-container">
          <img src="http://d5qsyj6vaeh11.cloudfront.net/images/whats available/landscapes/article images/w1400_a_new landscape_main.jpg">
        </div>
        <span class="category__title">
          Discover dramatic scenes
          <span class="category__tag">Explore</span>
        </span>
      </a>
    </div>
  </div>
</section>

我还有一个 JSFiddle https://jsfiddle.net/gd2xnfb3/1/

如果有人能帮我解决这个问题，记住我的要求就好了。

Answer 1

引导解决方案:

您可以使用以下类使用单行 Bootstrap 轻松实现此目的

<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 columns">

对于相同的列高解决方案，我使用了 matchheight.js，如果您由于跨浏览器兼容性不想使用 flex css 解决方案，这是最简单有效的解决方案。

例如代码:http://codepen.io/Nasir_T/pen/QKYPZk

---

基础解决方案:

使用 foundation，我看到的第一个错误是您使用的 x-large-4 列类在 foundation.css 中不存在，或者是自定义的 col 类。无论如何，我建议您改用 large-4。同时从 .row 类中删除 display:table 并更改 .columns 类，如下所示:

.columns {
    display:block;
    padding:0px !important;
}    

现在对于相同的行高，我建议你使用 foundation.equalizer.js javascript。 http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

例如代码:http://codepen.io/Nasir_T/pen/ALNZaw

希望这对您有所帮助。