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

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

javascript php html mysql css

Javascript 在列中排列div并防止垂直自由空间,javascript,php,html,mysql,css,Javascript,Php,Html,Mysql,Css,比如说，我们有一个网站，包含5个栏目：“每日”、“每周1”、“每周2”、“每月1”、“每月2” 现在有一个脚本，它以未排序的顺序从MySQL数据库获取数据（我认为没有办法按查询排序），这些数据集（“具有特定高度的卡片”）应该显示在数据集对应的列中如何做到这一点我所拥有的是，“卡片”被放置在右边的一栏，但是如果之前有另一张卡片被放置在另一列中，则卡片之间有垂直的空白有没有办法在css中实现这一点，或者我必须在php或JavaScript中进行变通 -编辑-非常小，不是100%工作，而是我的实

比如说，我们有一个网站，包含5个栏目：“每日”、“每周1”、“每周2”、“每月1”、“每月2”

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

如何做到这一点

我所拥有的是，“卡片”被放置在右边的一栏，但是如果之前有另一张卡片被放置在另一列中，则卡片之间有垂直的空白

有没有办法在css中实现这一点，或者我必须在php或JavaScript中进行变通

-编辑-非常小，不是100%工作，而是我的实际测试文件：）


标题
身体{
宽度：100vh；
背景色：暗绿色；
}
.spalte1{
位置：绝对位置；
宽度：20%；
左：0%；
高度：80vh；
背景色：浅绿色；
边框：实心1px；
}
.spalte2{
位置：绝对位置；
左：20%；
宽度：20%；
高度：80vh；
背景颜色：黄色；
边框：实心1px；
}
.spalte3{
位置：绝对位置；
左：40%；
宽度：20%；
高度：80vh；
背景颜色：绿色；
边框：实心1px；
}
.spalte4{
位置：绝对位置；
左：60%；
宽度：20%；
高度：80vh；
背景颜色：灰色；
边框：实心1px；
}
.spalte5{
位置：绝对位置；
左：80%；
宽度：20%；
高度：80vh；
背景颜色：深粉色；
边框：实心1px；
}
.卡片{
位置：相对位置；
背景色：深蓝色；
边框：实心1px；
高度：7vh；
}
垃圾邮件1
垃圾邮件2
垃圾邮件3
垃圾邮件
垃圾邮件
Karte1
Karte2
Karte3
Karte4
Karte5

下面是一个简单的解决方案，用于包含卡片的列：

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

//css
.栏目{
列表样式类型：无；
//宽度：100%；
填充：0；
保证金：0；
}
.栏目{
显示：内联块；
边框：1px实心#aaa；
填充：10px；
宽度：100px；
垂直对齐：顶部；
}
.卡片{
列表样式类型：无；
填充：0；
}
.卡片{
边框：1px实心#eddff；
背景：#ededed；
边缘顶部：2倍；
填充物：5px；
}
//html



卡片1
卡片4




卡片2




卡片3
卡片5
卡片6

这种方法比试图根据其内容将几个div（绝对）定位在其他div之上更容易

对于php部分，我还不能给出答案，因为还没有php代码要看

应该能干。你能提供一份吗？取决于你现在如何放置它们。在“

ul