Positioning textboxes of varying heights in a vertical alignment, causing one to commence directly below the other

Seeking assistance with creating text boxes for displaying reviews on a website. Each review is contained in a box, with varying heights based on the amount of text. Desired layout is shown in the image below, with black boxes representing review containers.

https://i.sstatic.net/PsRj4.jpg

Struggling to achieve the desired layout without having all boxes stretch to the same size using the flex attribute, or being unable to align based on the largest text box in the column.

Current example code:

.container-reviews {
  width: 100%; 
  justify-content: space-between;
}

.box {
  width: 24%;
  background-color: black;
  color: white;
  float: left;
}

<div class="container">

  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
  <div class="box">Lorem ipsum dolor sit amet</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
  <div class="box">Lorem ipsum dolor sit amet</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>

</div>

Seeking advice on adjustments to code to achieve the desired alignment for box divs as shown in the image.

htmlcss

Answer №1

To align the boxes to the top, use column flex with box wrapping and specify flex-start.

.container {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-content: flex-start;
    max-width: 300px;
    max-height: 300px;
}
.box {
    width: 70px;
    margin: 0 5px 15px 5px;
    background: yellow;
    text-align: center;
}
<div class="container">
    <div class="box" style="height:50px">Box 1</div>
    <div class="box" style="height:100px">Box 2</div>
    <div class="box" style="height:90px">Box 3</div>
    <div class="box" style="height:30px">Box 4</div>
    <div class="box" style="height:60px">Box 5</div>
    <div class="box" style="height:70px">Box 6</div>
    <div class="box" style="height:40px">Box 7</div>
    <div class="box" style="height:80px">Box 8</div>
    <div class="box" style="height:90px">Box 9</div>
    <div class="box" style="height:100px">Box 10</div>
    <div class="box" style="height:120px">Box 11</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

Design a personalized button with a hand-shaped image using CSS

I am aiming to design a unique custom button that resembles the shape of a hand featured in this image, with the intention of adding some functionality to it later. My attempts so far have involved using an SVG path created in GIMP within a button, but all ...

htmlcss

Tips for dynamically adjusting the color of link text within jQuery Mobile?

When using jQuery Mobile, links are styled according to the theme stylesheet. If you want to change this styling, you can use !important as follows: .glossaryLink{ color: white !important; background-color: #CC8DCC; } I am looking to dynamically cha ...

jqueryhtmlcssjquery-mobile

Conceal specific pages within the DataTable without deleting them

Currently, I am facing an issue where the dataTable paginates and removes the DOM pages along with the data. My goal is to extract all the data from the dataTable and convert it to JSON without losing access to the DOM when pagination occurs. I want to m ...

javascriptjqueryhtmljsondatatables

html div elements may not align correctly

Currently, I am in the process of coding a website that contains numerous images. To assist me in organizing and arranging these images, I have turned to angularjs. Initially, everything was progressing smoothly until this issue arose: https://i.sstatic. ...

htmlcssangularjs

Leveraging jQuery for Adding Text to a Span While Hovering and Animating it to Slide from Left to

<p class="site-description">Eating cookies is <span class="description-addition"></span>a delight</p> <script> var phrases = new Array('a sweet experience', 'so delicious', 'the best treat', ...

javascriptjqueryhtml

React beautiful dnd and Material UI list encountering compatibility problem

I recently encountered an issue while using react beautiful dnd to create a rearrangeable Material UI List. Everything was working correctly, except for the ListItemSecondaryAction within the list. When dragging a list item, the ListItemText and ListItemIc ...

javascriptcssreactjsmaterial-uireact-beautiful-dnd

Invisible and Unrestricted automatic playback

Why is auto play muted in both Firefox and Chrome? How can we code it so that browsers don't block it? Here's the code I'm using: <audio id="audio1" src="https://notificationsounds.com/storage/sounds/file-sounds-1217-relax ...

javascripthtmljquerycssaudio

How do I set up a navigation bar item to align to either side based on the selected language?

I need to adjust the positioning of the last list item component within a specific div. The webpage is available in both Arabic and English, with the direction changing based on the selected language. Here is a snippet of CSS code that I'm using: #na ...

htmlcssbootstrap-4

Dynamically pass specific outputs from multiple SQL queries to a form

The query is functioning properly, returning a table with the associated data in rows. I am looking to have a button displayed with each row that triggers a function specific to that row when clicked. Currently, the function works manually by inputting the ...

phphtmlsqlmysqli

Ways to distinguish jquery response apart from using $.post method?

Using jquery $.post method: $.post( 'includes/studiesAjax/addTryb.php', {inputVL: inputVL}, function(res){ $("#container").html(res); } ); The response contains a long html code. I am interested in extracting data from ...

phpjqueryhtmlajaxpost

unable to adjust the maximum height limit

I've been struggling to set a maximum height on the slider I'm currently using. No matter what height value I input, it doesn't seem to take effect. Additionally, I attempted setting the width for the echo img row in the PHP section but enco ...

javascripthtmlcss

Utilizing KineticJS in HTML5 for image transformation and saving to a web service completely free

I'm looking to utilize kinetic to manipulate a single image using anchor points. I stumbled upon this helpful example: My goal is to save only the yoda image (id: myImg) and send it to a web service. However, I'm encountering difficulties with t ...

imagehtmlsavetransformkineticjs

Create a simple carousel using only vanilla JavaScript, without relying on any external plugins

Currently, I am working on implementing a carousel using plain JavaScript without the use of any plugins. My goal is to have previous and next buttons that will control the sliding images. var firstval = 0; function ...

javascriptjqueryhtmlcss

Add a CSS class to an innerHTML element just a single time

I currently have 2 files available: data.php page.php The data.php file is responsible for fetching a row from a SQL database and sending it to the page.php file. Within the page.php file, there is a JavaScript script that receives this row through AJAX ...

javascriptphphtmlcssajax

What is hindering me from fetching the information stored in my json file?

Currently, I am delving into learning AngularJS by working on a simple webpage for a company. This page will showcase products that are fetched from a json file. Following a tutorial from the AngularJS website, which covers the exact task I aim to achieve, ...

javascripthtmlangularjsjson

Tips for concealing an entire row of a table with Jquery

I am currently working on a system that involves a table with anchor tags named original and copy in each row. By clicking on these anchor tags, we are able to update the database whether the item is an original or a copy using ajax. However, I am facing a ...

javascripthtmljqueryajaxlaravel-8

Cross-platform mobile browsers typically have scrollbars in their scrollable divs

I have successfully implemented scrollable div's on a page designed for tablets running Android 3.2+, BlackBerry Playbook, and iOS5+ (except iPad 1). However, I would like to add scrollbars to improve the user experience. For iOS5, I can use the suppo ...

javascriptandroidcsswebkitscrollbars

Fill the drop-down menu with the present day's date, month, and year

I'm new to this, so please bear with me. I have some html and jQuery code: $(document).ready(function() { var d = new Date(); var month = d.getMonth() + 1; var year = d.getFullYear(); $("#month").val(month); $("#year").val(year) ...

javascriptjqueryhtml

What is the best way to position the section and footer to the left side of the sidenav?

I am relatively new to the world of html and css, trying my hand at constructing html layouts. I have encountered a bit of trouble in aligning the footer and section to the left of the nav bar. No matter what percentage widths I use, they always end up ove ...

htmlcss

In CodeIgniter, the $this->input->post() function consistently returns an empty value

I'm encountering an issue where the value from an AJAX post always turns out empty. Even after confirming that the value is correct before the post, I'm unable to retrieve it using $this->input->post() HTML <?php if ($product_info-> ...

javascriptphphtmlajaxcodeigniter