将具有可变高度的列表项对齐到底部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的均匀分布，因此您可能需要针对＆＃进行处理34;间隙＆＃34;在li之间。由于你没有说明应该如何看，我没有试图以任何特定的方式解决它。

我认为这是获得底部对齐的方法。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

float 不与垂直对齐兼容。

• inline-block＆amp; vertical-align确实：

＆＃13;

＆＃13;

ul {
  width: 1000px;
  height: 400px;
  float: left;
}

ul li {
  /*float: left;*/
  display: inline-block;
  vertical-align:bottom
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

• display:flex＆amp; align-items确实：

＆＃13;

＆＃13;

ul {
  width: 1000px;
  height: 400px;
  display:flex;
  align-items:flex-end;
  
}

ul li {
display:block;
float:right;
/* whatevever float or display will be overide by flex model */
margin:1px; /* is efficent */
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

• display:grid

＆＃13;

＆＃13;

* {margin:0;padding:0;}
ul {
  width: 1000px;
  height: 400px;
  float: left;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 0));
  grid-auto-flow: dense;
  grid-auto-rows: minmax(150px, 300px);
  grid-gap: 1px;/* whatever */
  align-items: end;/* or align-self on children */
}

ul li {
  display:block;
  /* align-self: end; */
}
ul li:nth-child(2n) {
  grid-column: span 2;}

ul li figure {
  margin: 0; padding: 0;
  width: 150px;
  height: 150px;
  background: red;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

• display:table当然