"To ensure consistent alignment, position list items with varying heights at the bottom of the

Question

"To ensure consistent alignment, position list items with varying heights at the bottom of the

Is there a way to align a series of li items to the bottom of their parent, the ul, without using any unconventional methods? The challenge lies in the fact that these li items need to have a float: left property and vary in height and width.

Below is my current code:

ul {
  width: 1000px;
  height: 400px;
  float: left;
  vertical-align: bottom; /* Although present, it doesn't influence the list items due to the float: left */
}

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

ul li figure {
  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>

Ideally, I want to achieve the layout shown in the following image, maintaining variable widths for the ul and with no gaps between list items:

https://i.sstatic.net/74Trr.png

html css

Answer 1

Answer №1

Take a look at the code snippet provided. The fixed width on the ul ensures an equal distribution of the li elements with table-cell. If you want to adjust the spacing between the li elements, you will need to make changes accordingly. Without specific instructions on how you want the layout to appear, I have left it as is.

To align the content at the bottom, this approach seems suitable:

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>

Answer 2

Take a look at the code snippet provided. The fixed width on the ul ensures an equal distribution of the li elements with table-cell. If you want to adjust the spacing between the li elements, you will need to make changes accordingly. Without specific instructions on how you want the layout to appear, I have left it as is.

To align the content at the bottom, this approach seems suitable:

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>

Answer 3

Answer №2

When it comes to vertical alignment, remember that float is not compatible with it.

inline-block & vertical-align solution:

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

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

ul li figure {
  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>

display:flex & align-items method:

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

ul li {
display:block;
float:right;
margin:1px;
}

ul li figure {
  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>

display:grid approach

* {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;
  align-items: end;
}

ul li {
  display:block;
}
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;
}

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

display:table option

Answer 4

When it comes to vertical alignment, remember that float is not compatible with it.

inline-block & vertical-align solution:

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

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

ul li figure {
  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>

display:flex & align-items method:

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

ul li {
display:block;
float:right;
margin:1px;
}

ul li figure {
  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>

display:grid approach

* {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;
  align-items: end;
}

ul li {
  display:block;
}
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;
}

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

display:table option

"To ensure consistent alignment, position list items with varying heights at the bottom of the

Answer №1

Answer №2

Similar questions

Position a div in the center of the page horizontally

What steps can I take to ensure a website designed for Firefox will work seamlessly on Safari and Chrome browsers as well?

choose the <li> element with no <a> tag

Make the div block fill the entire body by setting its width to 100%

Welcome to the awe-inspiring universe of Typescript, where the harmonious combination of

Styling list items (li) on hover without using the li:

Having trouble resolving the signature of a class decorator when invoked as an expression with @Injectable in Angular

In IOS 9.0, flex items do not wrap to new lines and result in overflow

Creating a smooth image transition effect using CSS

The Mat-slide-toggle resembles a typical toggle switch, blending the functionalities of

The inclusion of the <div> tag disrupts the functionality of the Material UI Grid

What is the alternative to using echo when outputting HTML?

HTML: Attempting to extract the inner div from the outer div and relocate it outside of the outer div

Ways to center a div with position:relative vertically on the page

JavaScript Function Not Executed in Bottom Section

Is it possible to apply CSS styling to all placeholders in a Sencha Touch application?

Is it possible to achieve a height transition using CSS instead of relying on JavaScript

Guide: Positioning the Icon in the Top Right Corner of the Image

Stretching Images on Circular Images - Utilizing Bootstrap and SCSS styling

What are the drawbacks of using JavaScript to load a series of images?