html - 将具有可变高度的列表项与底部 ul 对齐

Question

我想将一系列 li 项对齐到它们的父元素 ul 的底部。棘手的部分之一是:li 元素需要 float: left 以及高度和宽度可变的元素。有没有一种方法可以在不使用“hacky”方法的情况下实现这一目标？

这是我当前的代码:

ul {
  width: 1000px;
  height: 400px;
  float: left;
  vertical-align: bottom; /* doesn't influence the list items because of the float: left. i thought i'd put it here anyways */
}

ul li {
  float: left;
  display: inline-block;
}

ul li figure {
  /* determines the width & height of the list item */
  margin: 0; padding: 0;
  width: 150px;
  height: 150px;
  background: red;
}

ul li:nth-child(2n) figure {
  width: 300px;
  height: 300px;
}

<ul>
  <li>
    <figure>
      <img />
    </figure>
  </li>
  <li>
    <figure>
      <img />
    </figure>
  </li>
  <li>
    <figure>
      <img />
    </figure>
  </li>
  <li>
    <figure>
      <img />
    </figure>
  </li>
</ul>

注意:ul 的宽度是可变的，我的设计要求列表项之间没有间隙。这就是我想要实现的目标:

Answer 1

查看代码片段，注意 ul 的固定宽度意味着 li 与 table-cell 的均匀分布，因此您可以需要解决 li 之间的“差距”。由于您没有指定它应该是什么样子，所以我没有尝试以任何特定方式解决它。

我认为这是实现底部对齐的方法。

ul {
  height: 400px;
  float: left;
  display: table;
  list-style: none;
}

ul li {
  display: table-cell;
  vertical-align: bottom;
  margin: 0;
  padding: 0;
}

ul li figure {
  /* determines the width & height of the list item */
  margin: 0; 
 padding: 0;
  width: 150px;
  height: 150px;
  background: red;
  display: inline-block;
}

ul li:nth-child(2n) figure {
  width: 300px;
  height: 300px;
}

<ul>
  <li>
    <figure>
      <img />
    </figure>
  </li>
  <li>
    <figure>
      <img />
    </figure>
  </li>
  <li>
    <figure>
      <img />
    </figure>
  </li>
  <li>
    <figure>
      <img />
    </figure>
  </li>
</ul>