如何使用 CSS 将列单元格内容移动到新行（使 HTML 网格响应）

Question

我有一个帖子网格布局，我正在尝试使其具有响应性，但在找出使用 CSS 重新组织/重新排序内容的最佳方法时遇到了一些麻烦。

原来的网格是这样的：

所以左边的图像是父 div 的全高（建议通常是 Flexbox 或绝对定位），然后是第二列中的两行用于发布内容）。

我想弄清楚的是最好的编码方式，这样我就可以使用 CSS 将块重新排列到下面的布局中（即保持 HTML 代码/结构相同）：

基本上，我需要找出使用 CSS 将块 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

你可以从tabledisplay切换到flexdisplay（使用媒体查询来选择何时从一个布局切换到另一个）。

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>