也许我会以错误的方式进行操作,但是我正在尝试创建< 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”的任何内容由于当前的网格布局时尚而变得无望)
最佳答案
如果您不需要它在Firefox 2及更低版本中运行,则可以将< li>的显示设置为内嵌式.
为了使该功能在IE 6(可能还有IE 7,我忘记了何时添加了适当的内联块支持),可以将它们设置为显示:内联.只要它们具有定义的宽度(我认为它们有宽度),它们就会显示为好像它们是内嵌块一样-参见http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。