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

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

The alignment of CSS boxes at the top is off

Tips for ensuring consistent dimensions on a bootstrap card

What is the best way to retrieve the innerHTML content of an anchor tag with Cheerio?

Error alert: The system could not locate Google when trying to drop pins

"Toggling a switch alters the appearance following the submission of a form

Page title missing from browser tab

Using JQuery to animate a division towards the left

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

I am experiencing an issue on my webpage where clicking on the login button does not seem

The mobile display does not support scrolling in Material-UI Drawer

What is the most effective method for digitally collecting a signature?

Issues are occurring with the @font-face css for the Futura Bk BT Bok.ttf font file

scrollable header within the confines of the container

Arranging three items within a div container

Is there a way to apply a css class to all nested elements in Angular 6 using Ngx Bootstrap?

Step-by-step guide on positioning a div below another div and centering both elements horizontally

I am experiencing an issue where my JavaScript code does not redirect users to the next page even

The end of the /if in the small template system fails to correctly detect the desired condition

Should the refresh button be displayed once the animation finishes?

How can I create a unique visual effect on the background in frontend development using chipped design techniques?