Question

让我们说，我们有一个网站，其中包含5列：＆＃34;每日＆＃34;，＆＃34;每周1＆＃34;，＆＃34;每周2＆＃34;，＆＃34 ; Monthly1＆＃34;，＆＃34; Monthly2＆＃34;。

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

如何实现这一目标？

我所拥有的是＆＃34;卡＆＃34;如果另一张卡放在另一列之前，则卡之间会有垂直的空白区域。

有没有办法在css中实现这一点，还是我必须在php或JavaScript中做一个变通方法？

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

＆＃13;

<!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>

＆＃13;

-edit - 实际上，我无法提供php，因为我正在重写我的代码并在页面上添加排序作为＆＃34;功能＆＃34;。我的实际代码只是从左到右将卡片写在表格中：）

SQL：

＆＃13;

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');

＆＃13;

专栏＆＃34; wann＆＃34; =每日，每周或每月专栏＆＃34; fmn＆＃34; =每周1或2，每月1或2

Answer 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代码可以查看......

在列中排序div并防止垂直自由空间

1 个答案: