Html CSS和DIV 3列中带“1”；瓷砖“；

我正在尝试创建一个类似这样的网站：

因此，每个单元格都有一个基于内容的大小。我被它的CSS部分卡住了，你知道我该怎么做吗

关于我正在尝试做的一个真实的例子：

---

谢谢

解决这个问题有两种可能的方法

使用jQueryAPI为您实现这一点（这是一个良好的开端）

将数据分成三个部分（参见工作示例）

表格{
浮动：左；
右边距：0.2米；
}
表1.1左tr td{
背景色：红色；
}
表1.1中tr td{
背景颜色：蓝色；
}
表1.3右侧tr td{
背景颜色：绿色；
}

左1
左2
左3
中间1
中间2
中间3
对1
对2
对三

如果您不需要支持ie10下的浏览器，您可以在CSS中本机支持。只需给容器一个列样式

ul {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

<ul>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
</ul>

ul{
-webkit列数：3；/*Chrome、Safari、Opera*/
-moz列计数：3；/*Firefox*/
列数：3；
}

列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项

---

您还可以指定每列之间的空间大小。请参阅：有关更多信息

那么您尝试了什么？关于这个问题已经有很多答案了。搜索“砖石布局”。我不久前回答了一个问题：因为我没有做很多web开发，有时候很难找到东西。砌石是答案（至少对我来说）