主页 / 问题 / 1061979
Accepted
newProgrammer
Asked:2020-12-23 03:01:57 +0800 CST2020-12-23 03:01:57 +0800 CST

通过 CSS 组合网格和列表

  • 772

我正在尝试做这样的事情：

在此处输入图像描述

内容输出通过react-jsx

{key % 4 == 0 ? (
  <div className="grid">grid</div>
) : (
 <div className="list">list</div>
)}

我得到这个布局：

<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>

任务是如何从屏幕截图中的这种布局中弥补css

css

2 个回答

  1. Best Answer

    这是一个可以转移到下一行的罐子（每行 8 个，分 4 列）。
    我又一次不得不放弃弯曲并在花车上做手势：D

    .grid, .list {
  float: left;
  width: 25%;
  outline: 1px dotted red;
}

.grid {
  height: 180px;
  background: silver;
}

.list {
  height: 60px;
  margin-right: 40%;
}

.grid:nth-child(8n + 5) {
  margin: -120px 0 0 -40%;
}

.list:nth-child(even) {
  background: antiquewhite;
}

.list:nth-child(8n + 6), .list:nth-child(8n + 7), .list:nth-child(8n + 8) {
  margin: 0 0 0 -15%;
}

.list:nth-child(8n + 6) {
  margin-top: -120px;
}

.list:nth-child(8n + 7) {
  margin-top: -60px;
}
    <div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>

    • 2 

  2. body {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 180px;
}

.grid {
  flex: 1 0 100%;
  background: silver;
}

.list {
  flex: 1 0 33%;
}

.list:nth-child(even) {
  background: antiquewhite;
}
    <div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="grid">grid</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>

    • 1

相关问题