Tips on aligning two divs vertically within an HTML <li> element, even with content that varies in size, by utilizing nested flexboxes

Every div contains unique content of varying heights. Our approach involves using flexboxes to ensure equal height for each li element.

Now, we are facing a challenge with positioning the div class="2" so that their tops align perfectly.

We've experimented with flexboxes to adjust the position of div class="2", but currently, they are all aligned at the bottom of each li.

    ul{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:stretch;
    }
    ul li{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:flex-start;
    }
    ul li div.1{
        align-self:flex-start;
    }
    ul li div.2{
        align-self:flex-end;
    }
<div>
<ul>
        <li>
            <div class="1">Some content</div>
            <div class="2">Some content</div>
        </li>
        <li>
            <div class="1">Some content</div>
            <div class="2">Some content</div>
        </li>
        <li>
            <div class="1">Some content</div>
            <div class="2">Some content</div>
        </li>
    </ul>
</div>

https://i.stack.imgur.com/BhHc1.png

Your assistance is greatly appreciated!

htmlcssflexbox

Answer №1

To achieve this effect using JavaScript, you can ensure that the height of all div elements with the class "one" remains consistent even if their content varies in length.

$(document).ready(function (){
  var maxHeight = 0;
  for(i=0;i<$(".one").length;i++){
    if($(".one").eq(i)){
      var currentHeight = $(".one").eq(i).height();
      if(currentHeight>=maxHeight){
        maxHeight = currentHeight;
      }
    }
    else{
      break;
    }
  }
  $(".one").height(maxHeight);
});
ul{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:stretch;
}
ul li{
  flex-wrap:wrap;
  list-style-type:none;
  align-items:flex-start;
  margin:10px;
}
ul li div.one{
  background-color:green;
  padding:10px;
  min-height:30px;
}
ul li div.two{
  background-color:red;
  padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
        <li>
            <div class="one">Some content</div>
            <div class="two">Some content</div>
        </li>
        <li>
            <div class="one">Some content<br>Some content<br>Some content</div>
            <div class="two">Some content</div>
        </li>
        <li>
            <div class="one">Some content</div>
            <div class="two">Some content</div>
        </li>
    </ul>
</div>

Answer №2

To ensure the photo-containing div displays properly, you can set a min-height on div.1;

    ul{
        display:flex;
        flex-direction:row;
            flex-wrap:wrap;
        align-items:stretch;
    }
    ul li{
        display:flex;
        flex-direction:row;
            flex-wrap:wrap;
        align-items:flex-start;
    }
    ul li div.1{
            align-self:flex-start;
        min-height: 400px;
    }
    ul li div.2{
        align-self:flex-end;
    }
<div>
<ul>
        <li>
            <div class="1">Some content</div>
            <div class="2">Some content</div>
        </li>
        <li>
            <div class="1">Some content</div>
            <div class="2">Some content</div>
        </li>
        <li>
            <div class="1">Some content</div>
            <div class="2">Some content</div>
        </li>
    </ul>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a quicker method than using document.getElementById('element-id').innerHTML to retrieve content?

Currently, I am developing a user-friendly step-by-step wizard for my website to gather information about custom orders. Utilizing JavaScript, I have been tasked with updating the content of each "page" using the document.getElementById('element-id&ap ...

javascripthtml

Modify a specific field in a row of the table and save the updated value in a MySQL database

I have successfully retrieved data from a database and displayed it in a table. Now, my goal is to enable editing of a specific field within a row and save the updated value back into MySQL. Here is the code snippet that includes displaying the data in th ...

phpjqueryhtmlmysqli

Display the entire paragraph when hovering over it

Is there a way to make the entire paragraph appear on hover instead of just showing parts of it? I am building a website on Weebly for a school project and my knowledge is limited. I tried using the following code, but it only displays some of the content ...

htmlcsshover

Having trouble aligning photos in the grid

I am facing an issue aligning my menu and image grid. The grid is inline-block but the first item stays stuck in the upper right-hand corner no matter what I do, without affecting the navigation menu placement. Additionally, when testing locally, everythin ...

htmlcssgridphoto

Setting up Stylelint in a Next.js project: A step-by-step guide

I'm looking to incorporate Stylelint into my Next.js app. Can I modify the next.config.js file to include the stylelint-webpack-plugin, in order to receive style errors during compilation? // next.config.js module.exports = { reactStrictMode: true, ...

javascriptcsswebpacknext.jsstylelint

Retrieve data from the database and automatically populate all text fields when the dropdown value is modified

I need assistance with populating all textbox values based on the dropdown selection. The dropdown values are fetched using an SQL query. Here is the HTML Code: <select name="name" ID="name" class="form-control"> <opt ...

javascriptphphtmlsql

Animating the navbar with CSS transitions

Seeking advice on adding a transition effect to my navbar. Specifically, I'd like to have a colored background appear below each link when hovered over. For example, when hovering over "HOME," a yellow color should display, and it should disappear whe ...

htmlcsstwitter-bootstrap

What is the best way to add a checkbox tag in Rails using JavaScript?

I am attempting to use javascript to append the values from option fields to checkboxes in Rails. Here is a snippet of my javascript code: $("#regions option").each(function(){ $("#region-checkboxes").append('<li><%= check_box_tag "region ...

javascriptjqueryhtmlruby-on-railsruby

Javascript error specific to Internet Explorer. Can't retrieve the value of the property 'childNodes'

After removing the header information from the XML file, the issue was resolved. Internet Explorer did not handle it well but Firefox and Chrome worked fine. An error occurred when trying to sort nodes in IE: SCRIPT5007: Unable to get value of the proper ...

javascripthtmlinternet-explorer-9

Execute AngularJS code when a button is clickeddoubleValue

I am in the process of developing a dynamic page where users can add anywhere from 1 to n products effortlessly. Although I have been exploring AngularJS for several months, I find myself facing some challenges when conceptualizing this scenario. The HTM ...

htmlangularjsjson

Unable to retrieve list using Selenium in C# due to issues with FindElements method

Currently, I am working with C# and NUnit. I have encountered an issue where I need to extract the value from a span element and store it in an ArrayList. This is the code I am using to retrieve the price list: var productprice = driver.FindElements(By. ...

c#htmlcssvisual-studioselenium

Is there a way to stop text from wrapping between words and punctuation marks using CSS or jQuery?

There is a paragraph containing some text. One issue I am facing is that punctuation at the end of a word may get wrapped to the next line, as shown here: This is the sentence, This is a new line Is there a way to fix this using CSS or jQuery? ...

javascriptjqueryhtmlcsswordpress

Getting the most out of option select in AngularJS by utilizing ng-options

I'm currently working with AngularJS and I am interested in utilizing ng-options for a select tag to showcase options organized under optgroups. Here is the array that I intend to use in my select option: $scope.myList = [ { "codeGroupComp ...

javascripthtmlangularjs

Choosing the content within a div and inserting it into an email

I have an email sender feature on my website where users can fill out input fields and hit send, resulting in me receiving an email. The text from all the input boxes is included in the email body. Additionally, there are some generated texts in divs with ...

javascriptphphtmlformsemail

Data is not being displayed in the Angular table

Currently, I am working on developing a time tracking application as part of a project. However, I have encountered an issue while attempting to showcase all the entries in a table format (as shown in the image below). Despite having two entries according ...

javascripthtmlangular

How to customize the active color of the navigation pills in Bootstrap 4

I want to customize the background color of each pill, but I also want a faded version of that custom color with an active color matching the full color of the corresponding pill. pill one > faded red pill two > faded blue pill three > faded bla ...

cssbootstrap-4

A chart using JavaScript that displays text values instead of a traditional website

I am a student with no background in programming, however, for my project I need to create a chart based on values from a txt file to display sensor data. I came across a chart that retrieves its values from a website, but I would like to modify it so it c ...

javascripthtml

What is the process for implementing a CSS theme switch in a CHM file and ensuring that it remains persistent?

Welcome to my tech world Greetings! I am a tech writer with a side interest in scripting JavaScript/jQuery for our help file (CHM file). While I consider myself a beginner in JS scripting, I have ventured into the realm of dynamic theme swapping within CH ...

javascriptcsscookiesthemeschm

How to Vertically Center a Span in a Mat-Header-Cell with Angular 5 Material

In my angular5 application, I am utilizing a material table to showcase some data. Within a mat-header-cell, I have a combination of a span and an img, and I'm attempting to align them correctly. This is how it currently appears: Below is the snipp ...

htmlcssangularangular5

Prevent anchor link click and drag functionality on an HTML page / Swipe through a container containing links

Is there a way to prevent clicking and dragging on a link in a webpage? When you click the left mouse button on a link and drag it, you can unintentionally move the link or open a new tab. I am looking for a way to disable this behavior using JavaScript o ...

javascripthtmlhyperlink