Matteo Corona Matteo Corona - 1 month ago 9
CSS Question

jQuery selector for the higher inline-block div into its container's row

I have a list of divs inside a container.

HTML:

<div class="container">
<div class="item">item 1</div>
<div class="item">item 2 some text some text some text</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5 some text/div>
<div class="item">item 6</div>
<div class="item">item 7 some text some text some text some text some text some text</div>
<div class="item">item 8 some text</div>
<div class="item">item 9</div>
</div>


CSS:

.container {
border: 1px solid red;
padding: 10px;
}

.item {
display: inline-block;
border: 1px solid green;
width: 120px;
margin: 10px;
background-color:blue;
}


In a such situation the result is that "items" have different heights, related to the text inside each one.

I would change the behavior of the "items" divs so that the higher "item" div of the ROW passes it's height to the other divs, but only those in the same row.

So each row's "item" must have the height of its row' higher element.

Obviously if I change the size of the viewport, the order of the rows changes, changing the arrangement.

Jquery or javascript, please.

Answer

No need JavaScript or jQuery. Use css3 flexbox.

.container {
  border: 1px solid red;
  flex-wrap: wrap;
  display: flex;
}

.item {
  border: 1px solid green;
  width: 120px;
  margin: 10px;
  background-color:blue;
}
<div class="container">
    <div class="item">item 1</div>
    <div class="item">item 2 some text some text some text</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5 some text</div>
    <div class="item">item 6</div>
    <div class="item">item 7 some text some text some text some text some text some text</div>
    <div class="item">item 8 some text</div>
    <div class="item">item 9</div>
</div>