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

问题描述 投票：-1回答：2

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

每张卡都是div。这些卡按列（红色虚线）分组，这些列是以flexbox布局布局的div。着色说明了卡映射到哪个版本。

一些代码：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;
}

现在我想为这些版本添加泳道。结果应如下所示：

我没有找到任何方法将诸如“断点”之类的东西放入弹性柱中以将卡片移动到下一个泳道。

网格可以工作，但我需要知道我预先会有多少列和泳道。由于地图是动态渲染的，我还需要动态渲染css。对我来说看起来不是最好的方法:-P

很明显，这可以通过html表来完成，但有两个原因阻止我使用它们：

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

支持表格的是事实，用表格实现这种布局真的很容易。我也不指望任何负面的副作用，因为这种布局并不意味着浮动或破坏。它只是两个固定的尺寸，视口外的所有东西都会滚动。

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

现在我正在使用没有前端框架，只是普通的html和CSS。如果可能的话，我想保持这种方式。

你有什么建议吗？

提前致谢！弗雷德

html css layout flexbox css-grid
2个回答
0
投票

有朝这个方向吗？

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值的卡的计数。

只有在使用多个版本时才需要动态样式表。

0
投票

感谢@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;
}

最有趣的部分是“display：contents;”对于列容器。 Browser support is still bad for this feature，所以我可能需要回到第一个例子。如果你想了解更多关于它，look here。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.