css - 如何使用 CSS 将列单元格内容移动到新行(使 HTML 网格响应)

Question

我有一个后网格布局，我试图使其响应，但在找出使用 CSS 重新组织/重新排序内容的最佳方法时遇到了一些问题。

原来的网格是这样的:

左边是一张图片，它是父 div 的全高(建议通常是 Flexbox 或绝对定位)，然后在第二列中的两行用于发布内容。

我想弄清楚的是最好的编码方式，这样我就可以使用 CSS 将 block 重新排序到下面的布局(即保​​持 HTML 代码/结构相同):

基本上，我需要找出使用 CSS 将 block 3(第二列中底部的“单元格”)移出第二列并移动到其自己的新行的最佳方法。

我试过 Flexbox，但无法使结构适用于两种布局。第一个布局似乎需要一个嵌套的列结构(第二个列需要它自己的 div 来指示 flex-direction)，如果我有一个，第二个布局将不起作用(我无法“转义”框 3 中的内容列，如果它是硬编码的)。

表格布局也是一样，HTML 必须规定单元格的位置/行和列。

到目前为止，我最接近的解决方案是三个基本的 HTML div，一个在另一个之上，以及框 1 的“绝对”定位。

基本 HTML

<div class="container">
    <div class="box-1">
        <img=full-height-image>
    </div>
    <div class="box-2">
        <post-title-and-meta>
    </div>
    <div class="box-3">
        <post-excerpt-read-more>
    </div>
</div>

基本 CSS(桌面)

.container{
    position: relative;
}

.box-1{
    height: 100%;
    position: absolute;
    max-width: 33.333%;
}

.box-1 img{
    height:100%;
    object-fit:cover;
}

.box-2,
.box-3{
    margin-left: 33.333%;
    max-width: 66.666%;
}

基本 CSS(响应式)

.container{
    position: relative;
}

.box-1{
    display: inline-block;
    position: relative;
    max-width: 33.333%;
}

.box-1 img{
    height:100%;
    object-fit:cover;
}

.box-2{
    display: inline-block;
}

.box-3{
    display:block;
    margin-left:0;
    max-width:100%;
}

但这似乎不是一种特别优雅/万无一失的方法。

根据我需要做的，以及“父 div 的全高”图像要求，有没有更好的方法来做到这一点？

Answer 1

你可以从 table display 切换到 flex display (使用 mediaquerie 来选择何时从一种布局切换到另一种布局)。

absolute 和 object-fit 确实可以用于图像。

想法的例子:

div {
  /* reset */
  border: solid 1px;
  box-sizing: border-box;
}


/* table-layout example , first box */

.container {
  width: 80%;
  margin: 0.25em auto;
  display: table;
  background: lightblue
}

.container .box-1 {
  display: table-cell;/* no need to filter, once parent is flex, it doesn't matter*/
  vertical-align: top;/* it won't disturb once a flex-child*/
  width: 33%;
  position: relative;
}

img {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

div>div:last-child {
  background: lightgreen
}


/* flex layout example, second box */

.bis {
  display: flex;
  flex-wrap: wrap;
}

.bis>div:nth-child(2) {
  flex: 1;
  background: tomato;
}

.bis>div:last-child {
  min-width: 100%;
}

<div class="container">
  <div class="box-1">
    <img src=http://dummyimage.com/100>
  </div>
  <div class="box-2">
    <h1>post-title-and-meta</h1>
  </div>
  <div class="box-3">
    <p>post<br>excerpt</p>
    <p>read-more</p>
  </div>
</div>
<div class="container bis">
  <div class="box-1">
    <img src=http://dummyimage.com/100>
  </div>
  <div class="box-2">
    <h1>post-title-and-meta</h1>
  </div>
  <div class="box-3">
    <p>post<br>excerpt</p>
    <p>read-more</p>
  </div>
</div>