在列中排序 div 并防止垂直可用空间答案

【问题标题】：order divs in columns and prevent vertical free space在列中排序 div 并防止垂直可用空间
【发布时间】：2016-10-19 16:48:12
【问题描述】：

假设我们有一个网站，其中包含 5 列：“Daily”、“Weekly1”、“Weekly2”、“Monthly1”、“Monthly2”。

现在有一个脚本，它以未排序的顺序从 MySQL 数据库中获取数据（我认为无法按查询排序） 和这些数据集（具有特定高度的“卡片”）应该显示在数据集对应的列中。

如何做到这一点？

我所拥有的是“卡片”放在右列，但是如果另一张卡片之前放在另一列中，卡片之间会有垂直空格。

有没有办法在 css 中实现这一点，还是我必须在 php 或 JavaScript 中解决？

-edit- 非常小而且不是 100% 工作，但我的实际测试文件:)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            width:100vh;
            background-color: darkolivegreen;
        }
        .spalte1{
            position:absolute;
            width: 20%;
            left: 0%;
            height: 80vh;
            background-color: aqua;
            border: solid 1px;
        }

        .spalte2{
            position:absolute;
            left: 20%;
            width: 20%;
            height: 80vh;
            background-color: yellow;
            border: solid 1px;
        }
        .spalte3{
            position:absolute;
            left: 40%;
            width: 20%;
            height: 80vh;
            background-color: green;
            border: solid 1px;
        }
        .spalte4{
            position:absolute;
            left: 60%;
            width: 20%;
            height: 80vh;
            background-color: gray;
            border: solid 1px;
        }
        .spalte5{
            position:absolute;
            left: 80%;
            width: 20%;
            height: 80vh;
            background-color: deeppink;
            border: solid 1px;
        }

        .card{
            position: relative;
            background-color: bisque;
            border: solid 1px;
            height: 7vh;
        }

    </style>
</head>
<body>
<div class="spalte1">spalte1</div>
<div class="spalte2">spalte2</div>
<div class="spalte3">spalte3</div>
<div class="spalte4">spalte4</div>
<div class="spalte5">spalte5</div>

<div class="spalte3 card">Karte1</div>
<div class="spalte1 card">Karte2</div>
<div class="spalte5 card">Karte3</div>
<div class="spalte4 card">Karte4</div>
<div class="spalte1 card">Karte5</div>


</body>
</html>

-edit- 实际上，我无法提供 php，因为我正在重写我的代码并将页面上的排序添加为“功能”。我的实际代码只是从左到右将卡片写在一张桌子上:)

sql:

CREATE TABLE `tkarten` (
  `id` int(11) NOT NULL,
  `Kartennummer` int(11) NOT NULL,
  `Beschreibung` text NOT NULL,
  `erledigt` tinyint(1) NOT NULL,
  `inBearbeitung` tinyint(1) NOT NULL,
  `wann` enum('daily','weekly','monthly','') NOT NULL,
  `fmn` enum('f','m','n') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Daten für Tabelle `tkarten`
--

INSERT INTO `tkarten` (`id`, `Kartennummer`, `Beschreibung`, `erledigt`, `inBearbeitung`, `wann`, `fmn`) VALUES
(1, 1, 'Karte 1 mach irgendwas hauptsache hier steht was', 0, 0, 'daily', 'm'),
(3, 2, 'Karte 2 macht auch irgendwas ... hauptsache hier steht was', 1, 0, 'weekly', 'n'),
(4, 3, 'Auch bei der dritten Karte haben wir arbeit', 0, 0, 'weekly', 'n'),
(5, 4, 'Die vierte Karte ist nicht so wichtig', 0, 0, 'monthly', 'm'),
(6, 5, 'Wir haben 5 voll... jetzt kann schon einer gegen sich selbst poker spielen', 0, 0, 'weekly', 'm'),
(7, 6, 'noch ne sechste Karte, weils so sch&ouml;n war.', 0, 0, 'monthly', 'f');

column "wann" = 每天、每周或每月 “fmn”列 = 每周 1 或 2 和每月 1 或 2

【问题讨论】：

应该可行。你能提供一个minimal, complete, verifiable example吗？
取决于您现在如何放置它们。在“
我们是否避免更新 mysql，因为您无法更改该代码？因为在查询中排序通常是最好的方法，所以可能存在修改查询以满足您的需要的选项
请同时提供 php 代码来展示您现在如何创建这些卡片。（包括sql）
1.卡片（div）必须位于内部列（div，最好是ul）。

标签： javascript php html mysql css

【解决方案1】：

这里有一个简单的解决方案，其中包含卡片的列：

//css

.columns {
  list-style-type: none;
  //width: 100%;
  padding: 0;
  margin: 0;
}
.column {
  display: inline-block;
  border: 1px solid #aaa;
  padding: 10px;
  width: 100px; 
  vertical-align: top;
}
.cards {
  list-style-type: none;
  padding: 0;

}

.card {
  border: 1px solid #ededff;
  background: #ededed;
  margin-top: 2px;
  padding: 5px;
}


// html
<ul class="columns">

<li class="column">
  <ul class="cards">
    <li class="card">card1</li>
    <li class="card">card4</li>
  </ul>
</li>

<li class="column">
  <ul class="cards">
    <li class="card">card2</li>
  </ul>
</li>

<li class="column">
  <ul class="cards">
    <li class="card">card3</li>
    <li class="card">card5</li>
    <li class="card">card6</li>
  </ul>
</li>

</ul>

这种方法比尝试定位（绝对）几个 div 更容易，具体取决于它的内容在其他一些 div 之上...

对于 php-part 我还不能给出答案，因为还没有 php-code 可以查看...

【讨论】：

这不是我问题的答案（定位 div），但它让我大开眼界 :) 我只需要在我的 php 代码中决定哪一列中的哪张卡 -> 分配给多个（每个column) 变量，然后将它们粘贴到 div 内的 html 站点中-.- 太容易了 :) 但是真的没有办法说“cell-div”将最可能的位置放在另一个“cell-div”下在特定的“column-div”中？！
可能有一个（非常复杂的）方法。这种方法更容易、更清洁、更易于维护。
是的，我没有对您的实际问题给出实际答案。我回答了你的实际目标！ XY Problem