1

假设我的列表中包含图像，如下所示。

<ul>
    <li>
        <img src="http://placehold.it/250x400">
    </li>
    <li>
        <img src="http://placehold.it/250x200">
    </li> 
    <li>
        <img src="http://placehold.it/250x200">
    </li>
    <li>
        <img src="http://placehold.it/250x400">
    </li>
</ul>

这个小提琴显示了页面上的设置。是否可以仅使用 CSS 使第二个和第三个列表项占用第一个右侧的空间？如果在列表结构中不可能，我需要对 HTML 进行哪些更改才能使其成为可能？无论列表中有多少图像，该解决方案都可以理想地工作。

编辑：下图显示了我正在寻找的那种东西。左边是我目前拥有的（如小提琴所示），但我想让它看起来像图像的右侧。 在此处输入图像描述

4

4 回答 4

1

您可以使用该float属性并设置li为float: left;

ul li {
    float: left;
}

演示

我强烈推荐以下关于floats的文章

解释：

向这些图像添加float属性基本上会将它们的行为设置为以下内容：

  • 他们将获得block显示类型 ( display: block;)
  • block它们不会像元素（或li）通常那样 占用太多空间，但它们会缩小到：
    • 明确设置的大小（如果有的话）
    • 到适合他们的尺寸！非浮动！内容
  • 如果floated 元素在前一个 ed 元素附近有空间float，它将显示在它附近（在同一“行”上），而不是像块元素通常表现的那样在下一个“行”上显示它

另一方面

我猜你更像是在马赛克布局之后，无论图像大小如何，都可以覆盖你的可用空间。

这只能通过 js 来完成。我推荐的库之一是砖石

于 2013-06-11T15:24:43.693 回答
0

Try this:

ul li {
    list-style: none;
    float: left !important; 
}
于 2013-06-11T15:32:14.880 回答
0

http://jsfiddle.net/VpcBY/5/

你需要这样的东西吗？

 ul li 
 {
    float: left;
 }
于 2013-06-11T15:28:43.970 回答
0

您可以使用垂直对齐属性并将 img 设置为垂直对齐：顶部：

img {vertical-align: top;}

请查看演示。

于 2013-06-11T15:29:53.040 回答