html - 带卡片的 CSS 样式类 Trello 板

Question

我正在构建一个里面有卡片的板，就像 Trello 板一样。

JSFiddle 在这里

这是代码：

<div class="board-container">
    <div class="board-top-menu">
        <div class="board-top-menu-item">TOP MENU ITEM 1</div>
        <div class="board-top-menu-item">TOP MENU ITEM 2</div>
    </div>
    <div class="board-content">
        <div class="cards-container">
            <div class="cards-container-head">
                <div class="cards-container-title">Test Panel 1</div>
            </div>
            <div class="cards">
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cards-container">
            <div class="cards-container-head">
                <div class="cards-container-title">Test Panel 2</div>
            </div>
            <div class="cards">
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cards-container">
            <div class="cards-container-head">
                <div class="cards-container-title">Test Panel 3</div>
            </div>
            <div class="cards">
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cards-container">
            <div class="cards-container-head">
                <div class="cards-container-title">Test Panel 4</div>
            </div>
            <div class="cards">
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

和样式表：

.board-container {
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
}

.board-top-menu {
  width: 100%;
  background-color: grey;
  display: flex;
  flex-direction: row;
  padding: 5px;
}

.board-top-menu-item {
  padding: 5px;
}

.board-top-menu-item:hover {
  background-color: #fefefe;
}

.board-content {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px;
  background-color: white;
  white-space: nowrap;
  height: 100%;
  width: 100%;
}

.cards {
  height: 100%;
  overflow-y: auto;
  padding-bottom: 20px;
}

.cards-container {
  width: 270px;
  display: inline-block;
  height: 100%;
  overflow: hidden;
  min-height: 100px;
  background-color: #e2e4e6;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  padding-bottom: 20px;
  margin-right: 10px;
  vertical-align: top;
}

.cards-container-head {
  position: relative;
  padding: 10px 15px;
  margin-bottom: 5px;
}

.cards-container-title {
  font-weight: bold;
  white-space: normal;
  width: 100%;
}

.card-container {
  width: 100%;
  margin: 0 auto 10px;
  background-color: #fff;
  min-height: 100px;
  border-radius: 5px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  transition: 0.15s;
}

.card-header {
  padding: 5px 10px;
  border-bottom: 1px solid #dbdbdb;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-world;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

我无法让我的棋盘水平滚动以查看所有卡片容器并垂直滚动在卡片容器内。

有时，如小提琴所示，容器会卡在另一个上面，有时它们会滚动整个页面，而不仅仅是容器。

标签： htmlcss

Answer 1

.board-container {
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
}

.board-top-menu {
  width: 100%;
  background-color: grey;
  display: flex;
  flex-direction: row;
  padding: 5px;
}

.board-top-menu-item {
  padding: 5px;
}

.board-top-menu-item:hover {
  background-color: #fefefe;
}

.board-content {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px;
  background-color: white;
  white-space: nowrap;
  height: 100%;
  width: 100%;
}

.cards {
  height: 100%;
  overflow-y: auto;
  padding-bottom: 20px;
}

.cards-container {
  width: 270px;
  display: inline-block;
  height: 100%;
  overflow: auto;
  min-height: 100px;
  background-color: #e2e4e6;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  padding-bottom: 20px;
  vertical-align: top;
}

.cards-container-head {
  position: relative;
  padding: 10px 15px;
  margin-bottom: 5px;
}

.cards-container-title {
  font-weight: bold;
  white-space: normal;
  width: 100%;
}

.card-container {
  width: 100%;
  margin: 0 auto 10px;
  background-color: #fff;
  min-height: 100px;
  border-radius: 5px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  transition: 0.15s;
}

.card-header {
  padding: 5px 10px;
  border-bottom: 1px solid #dbdbdb;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-world;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<div class="board-container">
    <div class="board-top-menu">
        <div class="board-top-menu-item">TOP MENU ITEM 1</div>
        <div class="board-top-menu-item">TOP MENU ITEM 2</div>
    </div>
    <div class="board-content">
        <div class="cards-container">
            <div class="cards-container-head">
                <div class="cards-container-title">Test Panel 1</div>
            </div>
            <div class="cards">
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cards-container">
            <div class="cards-container-head">
                <div class="cards-container-title">Test Panel 2</div>
            </div>
            <div class="cards">
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cards-container">
            <div class="cards-container-head">
                <div class="cards-container-title">Test Panel 3</div>
            </div>
            <div class="cards">
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cards-container">
            <div class="cards-container-head">
                <div class="cards-container-title">Test Panel 4</div>
            </div>
            <div class="cards">
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 01</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
                <div class="cards-container">
                    <div class="cards-container-head">
                        <div class="cards-container-title">ITEM 02</div>
                        <div />

                    </div>
                    <div class="card-container">
                        <div class="card-header">Material 1
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>