Question

有没有办法如何制作相同高度的所有列表项？我搜索了这个网站并找到了这个解决方案但是如果我添加float:left它对我不起作用。每4张图片后我需要float:left换行。

        ul.Gallery{display:table-row;}
        ul.Gallery li{float:left;list-style:none;margin:0 5px 5px 0;
    display:table-cell;background:red;}

    <ul class="Gallery">
    <li><img src="image1.jpg"><p>description1</p></li>
<li><img src="image2.jpg"><p>description2</p></li>
<li><img src="image3.jpg"><p>description3</p></li>
<li><img src="image4.jpg"><p>description4 description4 description4 description4 description4 description4</p></li>
<li><img src="image5.jpg"><p>description5</p></li>

    </ul>

这就是我需要的：

enter image description here

如果某些图片没有任何描述或描述长度不同，这就是我得到的。 enter image description here

我无法为width元素设置min-heigth或<li>，因为并非所有图片都有描述，而且描述长度可能会有很大差异。

我不想为此目的使用javascript。

Answer 1

试试这个（编辑后的代码）：

ul.Gallery{display:block; padding:0; margin:0;}
ul.Gallery li{
padding:0;
background:red;
display:inline-block;
vertical-align: top;
width:23%;
margin:0 1% 5px 0;}
img {max-width: 100%; height: auto;}

http://jsfiddle.net/uR9YV/

Answer 2

删除float:left并添加height:100%

ul.Gallery li{
      list-style:none;
      margin:0 5px 5px 0;
      background:red;
      display:table-cell;
      vertical-align: top;
      height: 100%;
    }

<强> DEMO

Answer 3

为float:left更改display:table-cell，li / cells将具有相同的高度。

但请注意，您可能必须限制li的宽度，因为文字会根据其长度产生不同的宽度。

JSfiddle Demo

<强> CSS

ul, li {
    list-style: none;
}

ul {
    display: table;
}

li {
    display:table-cell;
    border:1px solid grey;
    padding:5px;
    width:20%;
}

li img {
    display: block;
    margin:0 auto;

}

li p {
    text-align: center;
}

Answer 4

这是使用相当不同的标记实现这种布局的方法之一。

此布局的特征是li元素都具有相同的高度意味着红色backgorund与一行具有相同的高度。

如果不是红色背景颜色，这个问题会容易得多解决。

HTML看起来像这样：

<div class="GalleryWrap">
<ul class="Gallery">
    <li>
        <img src="http://placekitten.com/150/100" />
        <p>The cat in the hat.</p>
    </li>
    <li>
        <img src="http://placekitten.com/150/100" />
        <p>The cat in the hat.</p>
    </li>
    <li>
        <img src="http://placekitten.com/150/100" />
        <p>The cat in the hat is wearing a fur coat.</p>
    </li>
    <li>
        <img src="http://placekitten.com/150/100" />
        <p>The cat in the hat.</p>
    </li>
</ul>
<ul class="Gallery">
    <li>
        <img src="http://placekitten.com/300/200" />
        <p>The cat in the hat.</p>
    </li>
    <li>
        <img src="http://placekitten.com/150/100" />
        <p>The cat in the hat.</p>
    </li>
    <li>
        <img src="http://placekitten.com/150/100" />
        <p>The cat in the hat is wearing a fur coat.</p>
    </li>
    <li>
        <img src="http://placekitten.com/150/100" />
        <p>The cat in the hat.</p>
    </li>
</ul>
</div>

和CSS：

.GalleryWrap {
    display: table;
    width: auto;
    margin: 0 auto;
    border-collapse: collapse;
}
ul.Gallery {
    display: table-row;
}
ul.Gallery li {
    display: table-cell;
    vertical-align: top;
    width: 25%;
    background-color: red;
    border: 5px solid white;
}
ul.Gallery li img {
    width: 100%;
}
ul.Gallery li p {
    margin: 5px;
}

创建一个CSS表.GalleryWrap，并将display: table-row用于ul.Gallery。

在每个ul.Gallery中，输入四个图像，并对每组四个图像重复。

我添加了一个白色边框来控制单元格之间的间距，但您也可以使用细胞间距和细胞填充。

实际上，可以使用脚本语言自动生成标记像PHP或用于构建网站页面的模板系统的功能。

演示：http://jsfiddle.net/audetwebdesign/DBZdf/

注意：使用flex可能更容易构建此布局，但flex仍然是新的，仅受最新浏览器的支持。

浮动<li>具有不同的高度</li>

4 个答案: