具有混合列数的响应式设计

Question

我的问题出在图片中：

桌面视图示例：

最大的问题是我必须使用div和display:table-cell来使所有块填充所有行的高度。行高取决于标题文本。

html代码示例：

<div class="container">
    <div class="row table">
        <div class="news table-cell float-none">
            <img src="" alt="">
            <div class="title"></div>
        </div>
        <div class="news table-cell float-none">
            <img src="" alt="">
            <div class="title"></div>
        </div>
    </div>
    <div class="row table">
        <div class="news table-cell float-none">
            <img src="" alt="">
            <div class="title"></div>
        </div>
        <div class="news table-cell float-none">
            <img src="" alt="">
            <div class="title"></div>
        </div>
        <div class="news table-cell float-none">
            <img src="" alt="">
            <div class="title"></div>
        </div>
    </div>
</div>

Answer 1

使用display flex，你应该能够得到你想要的东西：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.news {
  display: flex;
  flex-direction: column;
}
.title {
  flex-grow: 1;
  background: lightblue;
}
img {
  display: block;
  width: 100%;
}
.news:nth-child(1) {
  width: 60%
}
.news:nth-child(2) {
  width: 40%
}
.news:nth-child(3) {
  width: 40%
}
.news:nth-child(4) {
  width: 30%
}
.news:nth-child(5) {
  width: 30%
}
@media (max-width: 600px) {
  .news:nth-child(1) {
    width: 100%
  }
  .news:nth-child(2),
  .news:nth-child(3),
  .news:nth-child(4),
  .news:nth-child(5) {
    width: 50%
  }
}
}

<div class="container">
  <div class="news table-cell">
    <img src="http://lorempixel.com/600/300/city/1/" alt="">
    <div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
  <div class="news table-cell float-none">
    <img src="http://lorempixel.com/400/300/city/2/" alt="">
    <div class="title">Fusce a mattis nibh, ut venenatis enim. Phasellus viverra efficitur vestibulum.</div>
  </div>
  <div class="news table-cell float-none">
    <img src="http://lorempixel.com/400/300/city/3/" alt="">
    <div class="title">Proin interdum massa et odio tincidunt commodo.</div>
  </div>
  <div class="news table-cell float-none">
    <img src="http://lorempixel.com/300/300/city/4/" alt="">
    <div class="title">Curabitur justo massa, porta lobortis leo id, consequat vulputate risus.</div>
  </div>
  <div class="news table-cell float-none">
    <img src="http://lorempixel.com/300/300/city/5/" alt="">
    <div class="title">Fusce suscipit nisl sit amet convallis consectetur.</div>
  </div>
</div>

使用代码段上的完整页面并调整浏览器大小