制作图像会占用div中的所有可用空间

Question

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

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

This fiddle显示设置在页面上的外观。是否可以仅使用CSS使第二个和第三个列表项占用第一个列表右侧的空间？如果在列表结构中不可能，我需要对HTML进行哪些更改才能实现？无论列表中有多少图像，解决方案都可以正常工作。

编辑：下图显示了我正在寻找的东西。左边是我现在拥有的（如小提琴中所示），但我希望它看起来像图像的右侧。

Answer 1

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

ul li {
    float: left;
}

<强> DEMO

我热烈推荐以下article about floats

Eplanation：

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

• 他们将获得block显示类型（display: block;）
• 它们不会占用block元素（或li）通常会占用的空间，但它们会缩小为：
  • 明确设置的大小（如果有）
  • 到适合他们的大小！非浮动！含量
• 如果float ed元素在先前float ed元素附近有空格，它将显示在它附近（在同一“行”上），而不是在下一个“行”上显示为块元素通常表现

另一方面

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

您可以仅使用js 完成此操作。我推荐的其中一个库是masonry

Answer 2

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

你需要这样的东西吗？

 ul li 
 {
    float: left;
 }

Answer 3

您可以使用vertical-align属性并将image设置为vertical-align：top：

img {vertical-align: top;}

请查看DEMO。

Answer 4

试试这个：

ul li {
    list-style: none;
    float: left !important; 
}