也许我会以错误的方式进行操作,但是我正在尝试创建< ul>充满这样的元素:
<li>
<div>
<img src="img/productname.png" alt="desc" />
<h2>Product name</h2>
<p>This text is variable in lenght so the height of each list item may differ.</p>
</div>
</li>
由于正在运行的网站具有最大宽度,因此我需要在一定数量的商品之后包装(三个似乎是最有效的选择),但是我很难记住该怎么做.
同样重要的是,图像均位于每个“行”的顶部,并且下一行不被上一行破坏.如果我只使用float:left;列表项上的内容,并且列表中的第一项的描述比其他项更长,然后我最终以该项目阻止了下一行的项目,从而得到了一个类似以下的表格:
+-----+-----+-----+
| | 2 | 3 |
| 1 +-----+-----+
| | |
+-----+ 4 |
| |
+-----+
+-----+-----+-----+
| | 2 | 3 |
| 1 +-----+-----+
| |
+-----+-----+
| 4 | 5 |
| +-----+
+-----+
这是否有可能,或者我只是在想像自己以前已经创建过这样的布局?
(顺便说一句,我不想为此使用表格的原因是因为它不是表格数据,它是必须包装的产品清单,并且显然要搜索其中同时包含“ css / html”和“ grid”的任何内容由于当前的网格布局时尚而变得无望)
最佳答案