这怎么可能使用任何 CSS 布局（网格、flexbox ..）

Question

在以下布局中挣扎，有可能吗？ html不固定。我添加了一些代码与 jsbin 一起使用：

https://jsbin.com/lifinogifu

Layout

<div class="container">
  <div class="item">
      <div class="item-image"></div>
      <div class="item-name"></div>
      <div class="item-meta"></div>
      <div class="item-action"></div>
  </div>
</div>

.item {
  display: flex;
  width: 100%;
  background-color: #eee;

  > * {
    height: 100px;
    border: 1px dotted #ccc;
  }
  
  &-image {
    width: 100px;
  }
  
  &-name {
    flex: 1;  
  }
  
  &-meta,
  &-action {
    width: 80px;
  }
  
}

Answer 1

使用网格：

要创建响应部分，您需要 2 列，第一列用于黄色，第二列用于所有其他块。在第二列中，您将创建一个包含两条线的网格，第一行将放置绿色块，第二行将放置另一个带有红色和蓝色块的网格。所以代码看起来像这样：

<style>

#yellow {
    background-color: yellow;
}

#green {
    background-color: green;
}

#red {
    background-color: red;
}

#blue {
    background-color: blue;
}

#grid1 {
    display: grid;
    grid-template-columns: 1fr 4fr;
    width: 100%;
    height: 400px;
}

#grid2 {
    display: grid;
    grid-template-columns: 1fr;
}

#grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

</style>

<div id="grid1">
    <div id="yellow"></div>
    <div id="grid2">
        <div id="green"></div>
        <div id="grid3">
            <div id="red"></div>
            <div id="blue"></div>
        </div>
    </div>
</div>

对于桌面部分，您必须创建一个媒体查询来更改网格的列以实现正确的设计。实际上，您只需更改 grid2 的布局即可实现此目的，因此一切都将并排：

#grid2 {
    grid-template-columns: 1fr 1fr;
}