What is the best way to arrange a number of inline-block elements with equal size in a vertical alignment?

My goal is to display a set number of items in a container, all with the same fixed size. The challenge arises when the content of each item varies in length, causing misalignment vertically:

.child {
  display: inline-block;
  background: #bbbbbb;
  margin: 0.5em;
  height: 5em;
  width: 8em;
}
<div class="container">
  <div class="child">1</div>
  <div class="child">1<br/>2</div>
  <div class="child">1<br/>2<br/>3</div>
  <div class="child">1</div>
  <div class="child">1<br/>2</div>
  <div class="child">1<br/>2<br/>3</div>
  <div class="child">1</div>
  <div class="child">1<br/>2</div>
  <div class="child">1<br/>2<br/>3</div>
</div>

The desired outcome can be seen here: https://i.stack.imgur.com/RsKjx.png

htmlcssflexbox

Answer №1

Follow these steps to achieve the desired result.

.container{
  display: inline-flex;
  flex-wrap: wrap;
}
.child {
  display: inline-block;
  background: #bbbbbb;
  margin: 0.5em;
  height: 5em;
  width: 8em;
}
<div class="container">
  <div class="child">1</div>
  <div class="child">1<br/>2</div>
  <div class="child">1<br/>2<br/>3</div>
  <div class="child">1</div>
  <div class="child">1<br/>2</div>
  <div class="child">1<br/>2<br/>3</div>
  <div class="child">1</div>
  <div class="child">1<br/>2</div>
  <div class="child">1<br/>2<br/>3</div>
</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

Issue with Bootstrap carousel controls malfunctioning and delayed transition to the next slide

I am facing some difficulties with my carousel. The transition to the next slide is taking longer than usual, and even when I try using the controls, they do not respond no matter how many times I click on them. I have followed all the instructions in the ...

htmlbootstrap-5

Attempting to create a login and registration form

Hello, I am attempting to create a form that can generate new user accounts and passwords. These values should be stored from the input tag when the user clicks on the register button. Unfortunately, I am encountering an issue where clicking the register ...

javascripthtmlcss

make sure the <option> tags fit seamlessly inside a Bootstrap card

I'm currently working on a project using Angular in combination with Bootstrap 4.0. My goal is to integrate <select>, <option>, and <optgroup> elements within a card. Below is the code snippet from the component.html file: <div ...

htmlbootstrap-4html-select

Simplest method for transforming static HTML files within SharePoint

My current challenge involves converting numerous static HTML documents to SharePoint (MOSS 2007). The documents can remain static, but they need to be integrated into the SharePoint site with its look and feel. Each page must be updated with the SharePoin ...

htmlsharepointmigrationsharepoint-2007

Utilizing Jquery on the client side in conjunction with a Node.js server

I am using nodejs within a docker-compose container to create a local web app. My goal is to use jquery on the client-side to load an HTML file into a div, but I'm encountering issues with it not working properly. Both the initial index.html and the n ...

javascripthtmljquerynode.jsexpress

Changing the color of MUI Typography when selected

Struggling to modify the styling of the Typography component nested inside a MenuItem. Unable to apply styles to ListItem as intended Check out my code here: https://codesandbox.io/s/dztbc?file=/demo.tsx:1481-1804 Desired behavior: Change styling on sele ...

cssreactjsmaterial-uimenuitemtypography

Images that dynamically adjust within the confines of a single div

My issue involves a simple script that includes two responsive images. When the window is minimized, the images adjust accordingly. However, when I place both images within the same div like this: <div class="wrapper"> <div class="block"&g ...

htmlcssresponsive-images

Issues with the animation of letters bouncing in css3

I wanted to implement an animated effect in CSS, specifically the "jumping letters" effect. However, it seems that the current implementation is not working as intended. The entire word moves upward instead of each letter bouncing individually. Can you h ...

htmlcss

How to implement jquery select functionality on clickable table rows?

I've come across a challenge while trying to implement clickable table rows with the jquery selectable function. Everything works perfectly fine with li elements, but I seem to hit a roadblock when using tables - the click event just stops working. Wh ...

javascriptjqueryhtml

Having difficulty recreating the arrow feature in the bootstrap sidebar

I am currently working on creating the fourth sidebar (from the left) using the templates provided in Bootstrap 5 examples. Everything seems to be falling into place except for one issue - I can't seem to get the arrow to rotate when aria-expanded=tr ...

htmlcssbootstrap-5

Get rid of the background shade in the area separating the menu items within a CSS menu

Is there a way to add some spacing between the menu items without affecting the background color applied to the anchor tags? I currently use a right margin of 13px for the spacing, but it also applies the background color, which is not the desired outcome ...

css

PHP time counting script

Can a countdown script be created using PHP? Websites like 4shared.com or megaupload.com utilize a similar script that starts counting from 20 seconds to 0. I am able to see how many seconds are left on the web page before I can click on the download but ...

phpjqueryhtml

Contrast the positions (offsets) of two elements

I am trying to determine if one element is positioned above another by comparing their offset positions. Specifically, I need to verify whether the me element is within the bounds of the screen element using their respective offset positions. HTML Code ...

javascriptjqueryhtml

The CSS transition duration is not being applied properly on the initial transition effect

Looking to create a dynamic set of sliding divs that can be triggered with the press of a button. Each div will contain a thumbnail image and accompanying text. The goal is to enable the user to navigate through the content by clicking the left or right bu ...

javascriptjqueryhtmlcss

Using HTML5's getCurrentPosition function with Meteor

Attempting to utilize the html5 geolocation api within Meteor. Executing: navigator.geolocation.getCurrentPosition(handle_geolocation_query); in my javascript code but encountering issues - suspect it could be tied to the restrictions on timing ( ) enfo ...

htmlgeolocationmeteor

Following the submission of the ajax form, the page is reloading unexpectedly

I need the voting form on index.php to submit without refreshing the page and display results from an external page within index.php. HTML <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script&g ...

javascriptphpjqueryhtmlajax

Uppercase the initial letter in a term to indicate a standard condition

I'm struggling to override the CSS in material UI. Even though I tried capitalizing both words, it only changes on selected and hover states, Is there a way to change it in the normal state as well? I've tried debugging but can't seem to fin ...

javascripthtmlcssreactjsmaterial-ui

Is there a method to individually collapse each div?

Each question in the database has a corresponding button. When one of these buttons is clicked, only the answer to that specific question should be displayed. However, the issue currently is that clicking on any button reveals all the answers simultaneousl ...

htmlspringbootstrap-4freemarker

Reposition the navbar-brand

I need to adjust the position of my navbar-brand slightly to the right as it is currently overlapping with another button. How can I achieve this in my HTML code? Here's a snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> ...

htmlbootstrap-4

The toggle button is having issues functioning properly within a While loop

Is there a way to enable slideToggle for all my queries? Currently, it is only working on the first query. Any suggestions on how to resolve this issue? JS code $(document).ready(function(){ $("#SendCopy").click(function(){ $("#users").slideToggle("s ...

phpjquerycss