Question

我正在开发类似于看板的东西，在该看板中我将列（也用div表示）的卡片（用div表示）布局。图片1说明了我的应用程序的当前状态：

layout now

每张卡均为div。这些卡分为几列（红色虚线），这些列以flexbox布局布局。着色说明了卡映射到哪个发行版。

一些代码： index.html：

<!doctype html>
<html>
<head>
    <title>Some code to copy & paste into your project</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="map">
        <div class="column">
            <div class="card release-1"></div>
            <div class="card release-2"></div>
            <div class="card release-3"></div>
        </div>
        <div class="column">
            <div class="card release-1"></div>
            <div class="card release-1"></div>
            <div class="card release-3"></div>
            <div class="card release-3"></div>
        </div>
        <div class="column">
            <div class="card release-2"></div>
            <div class="card release-2"></div>
            <div class="card release-3"></div>
            <div class="card release-3"></div>
        </div>
    </div>
</body>
</html>

styles.css：

.map {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;

}

.card {
    width: 100px;
    height: 80px;
    border: 1px solid black;
    margin: 10px;
}

.release-1 {
    background-color: #f90;
}

.release-2 {
    background-color: #0a0;
}

.release-3 {
    background-color: #0af;
}

现在，我想为发布添加泳道。结果应如下所示：

layout with swimlanes I'm aiming for

我找不到任何方法可以在flex列中放入“断点”之类的东西，以将卡片移动到下一个泳道。

网格可以工作，但是我需要事先知道我将有多少列和泳道。由于地图是动态渲染的，因此我也需要动态渲染css。对我来说似乎不是最好的方法：-P

很明显，这可以使用html表完成，但是有两个原因使我无法使用它们：

在基于div和css的浮动布局替换表布局的日子里，我了解到表应仅用于数据，而不用于布局
我的整个布局已经基于div了。切换到表格需要大量的努力，我想避免

赞成使用表格的事实是，使用表格来实现这种布局确实非常容易。我也不希望有任何负面影响，因为这种布局并不意味着会漂浮或破裂。这只是两个固定的尺寸，并且视口之外的所有内容都会滚动。

无论如何：在我重新编写所有内容之前，我想知道是否可以通过flex / flexbox布局或其他我从未听说过的其他方式来实现。

现在，我没有使用任何前端框架，只是使用普通的html和css。我想尽可能保持这种状态。

您有什么建议吗？

提前谢谢！弗雷德

Answer 1

朝着这个方向前进？

document.querySelector('.toggle-lanes')
  .addEventListener('click', toggleLanes)

function toggleLanes(e) {
document.querySelector('.toggle-lanes-target').classList.toggle('lanes')
  
}

:root {
  --column: 1;
  --release: 1;
}

.cards {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
}
.cards .card {
  padding: 20px;
  box-sizing: border-box;
  border-radius: 20px;
  border: 3px solid silver;
  border: 1px solid silver;
  background-color: gold;
  grid-column-start: var(--column);
}
.cards .card.release-1 {
  background-color: orange;
}
.cards .card.release-2 {
  background-color: green;
}
.cards .card.release-3 {
  background-color: blue;
}

.cards.lanes {
  grid-auto-flow: column dense;
}
.cards.lanes .card {
  grid-row-start: calc(var(--release) * 1000 + var(--num));
}

.card[style*="--release:1"],
.card[style*="--release: 1"] {
  background-color: orange;
}

.card[style*="--release:2"],
.card[style*="--release: 2"] {
  background-color: green;
}

.card[style*="--release:3"],
.card[style*="--release: 3"] {
  background-color: blue;
}

<button class="toggle-lanes">Click to toggle swimming lanes</button>

<div class="cards toggle-lanes-target">
  <div class="card" style="--column: 1; --release: 1; --num: 1">C1 R1 A</div>
  <div class="card" style="--column: 2; --release: 1; --num: 1">C2 R1 B</div>
  <div class="card" style="--column: 2; --release: 1; --num: 2">C2 R1 C</div>
  <div class="card" style="--column: 1; --release: 2; --num: 1">C1 R2 D</div>
  <div class="card" style="--column: 3; --release: 2; --num: 1">C3 R2 E</div>
  <div class="card" style="--column: 3; --release: 2; --num: 2">C3 R2 F</div>
  <div class="card" style="--column: 1; --release: 3; --num: 1">C1 R3 G</div>
  <div class="card" style="--column: 2; --release: 3; --num: 1">C2 R3 H</div>
  <div class="card" style="--column: 2; --release: 3; --num: 2">C2 R3 I</div>
  <div class="card" style="--column: 3; --release: 3; --num: 1">C3 R3 J</div>
  <div class="card" style="--column: 3; --release: 3; --num: 2">C3 R3 J</div>
</div>

使用CSS自定义属性有助于解决无限列/行问题

唯一的困难在于--num属性值的计算。基本上，这是具有相同--column和--release值的纸牌的计数。

仅当您不确定使用多个版本时，才需要动态样式表。

Answer 2

由于@yunzen的帮助，我想出了一个解决方案。基本上，所有这些归结为将发行版放入网格中。卡将在释放容器中找到它们的位置。

此方法的缺点是，需要根据网格中的列数和发布数动态生成CSS的各个部分。但是，与@yunzen的答案相比，它使代码更易于理解。

最低解决方案

HTML：

<!doctype html>
<html>
<head>
    <title>Grid</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="map">

        <div class="release column-1 release-1">
            <div class="card"></div>
        </div>
        <div class="release column-1 release-2">
            <div class="card"></div>
        </div>
        <div class="release column-1 release-3">
            <div class="card"></div>
        </div>

        <div class="release column-2 release-1">
            <div class="card"></div>
            <div class="card"></div>
        </div>
        <div class="release column-2 release-3">
            <div class="card"></div>
            <div class="card"></div>
        </div>

        <div class="release column-3 release-2">
            <div class="card"></div>
            <div class="card"></div>
        </div>
        <div class="release column-3 release-3">
            <div class="card"></div>
            <div class="card"></div>
        </div>

    </div>
</body>
</html>

CSS：

/* STATIC */

.map {
    display: grid;
    grid-auto-columns: min-content;
    grid-auto-rows: min-content;
}

.card {
    width: 100px;
    height: 80px;
    border: 1px solid black;
    margin: 10px;
}

/* DYNAMIC */

.column-1 {
    grid-column-start: 1;
    grid-column-end: 2;
}

.column-2 {
    grid-column-start: 2;
    grid-column-end: 3;
}

.column-3 {
    grid-column-start: 3;
    grid-column-end: 4;
}

.release-1 {
    grid-row-start: 1;
    grid-row-end: 2;
}

.release-2 {
    grid-row-start: 2;
    grid-row-end: 3;
}

.release-3 {
    grid-row-start: 3;
    grid-row-end: 4;
}

/* DEBUG */

.release-1 .card {
    background-color: #f90;
}

.release-2 .card {
    background-color: #0a0;
}

.release-3 .card {
    background-color: #0af;
}

带有列容器

由于我想保留列容器，因此扩展了上面的代码，如下所示：

HTML：

<!doctype html>
<html>
<head>
    <title>Grid with Columns</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="map">

        <div class="column column-1">
            <div class="release release-1">
                <div class="card"></div>
            </div>
            <div class="release release-2">
                <div class="card"></div>
            </div>
            <div class="release release-3">
                <div class="card"></div>
            </div>
        </div>

        <div class="column column-2">
            <div class="release release-1">
                <div class="card"></div>
                <div class="card"></div>
            </div>
            <div class="release release-3">
                <div class="card"></div>
                <div class="card"></div>
            </div>
        </div>

        <div class="column column-3">
            <div class="release release-2">
                <div class="card"></div>
                <div class="card"></div>
            </div>
            <div class="release release-3">
                <div class="card"></div>
                <div class="card"></div>
            </div>
        </div>

    </div>
</body>
</html>

CSS：

/* STATIC */

.map {
    display: grid;
    grid-auto-columns: min-content;
    grid-auto-rows: min-content;
}

.column {
    display: contents;
}

.card {
    width: 100px;
    height: 80px;
    border: 1px solid black;
    margin: 10px;
}

/* DYNAMIC */

.column-1 .release {
    grid-column-start: 1;
    grid-column-end: 2;
}

.column-2 .release {
    grid-column-start: 2;
    grid-column-end: 3;
}

.column-3 .release {
    grid-column-start: 3;
    grid-column-end: 4;
}

.release-1 {
    grid-row-start: 1;
    grid-row-end: 2;
}

.release-2 {
    grid-row-start: 2;
    grid-row-end: 3;
}

.release-3 {
    grid-row-start: 3;
    grid-row-end: 4;
}

/* DEBUG */

.release-1 .card {
    background-color: #f90;
}

.release-2 .card {
    background-color: #0a0;
}

.release-3 .card {
    background-color: #0af;
}

最有趣的部分是“显示：内容；”用于列容器。 Browser support is still bad for this feature，因此我可能需要回到第一个示例。如果您想了解更多信息，请look here。

如何使用html / css在泳道中布置div？

2 个答案: