How I can set the same height to all items

Question

I need some help to set the same height to all items. I want all items to have the same length, just like the first image .

The second image is what I display in my project.

My cod is:

<div class="item">
<div class="col-md-3 col-sm-6 col-xs-12 product">
    <span class="product-thumb-info" style="margin-top: 20px">
        <a href="item.php?page=item&id_prod=<?php echo $stock_rs['id_prod']; ?> ">
            <span class="product-thumb-info-image">
                <span class="product-thumb-info-act">
                    <span class="product-thumb-info-act-right"><em><i class="fa fa-plus"></i> Detali</em></span>
                </span>
                <img alt="" class="img-responsive" src="img/products/<?php echo $stock_rs['nume_imagini']; ?>">
            </span>
        </a>
        <span class="product-thumb-info-content" style="text-align: center">
            <a href="item.php?page=item&id_prod=<?php echo $stock_rs['id_prod']; ?> ">
                <h6><strong><?php echo $stock_rs['denumire_produs']; ?><br/></strong></h6>
                <span class="price">
                    <strong><span class="amount"><?php echo $stock_rs['pret_produs'] . ' Lei'; ?></span></strong>
                </span>
            </a>
        </span>
    </span>
</div>

The code? Where is the code relevant to the issue ..? We can't fix images. — Teemu, Jan 11 '19 at 10:20
Check this link if you want to learn more about equal height : https://www.w3schools.com/howto/howto_css_equal_height.asp — Thanveer Shah, Jan 11 '19 at 10:22
The one and only good way: [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and its 2D variant [Grid](https://css-tricks.com/snippets/css/complete-guide-grid/). — Jeremy Thille, Jan 11 '19 at 10:42

score 1 · Answer 1 · answered Jan 11 '19 at 10:24

1

Try to set display: flex to parent container.

answered Jan 11 '19 at 10:24

Alexey Kopievskiy

21
7

and `align-items: stretch;` – Jeremy Thille Jan 11 '19 at 10:43

score 0 · Answer 2 · answered Jan 11 '19 at 10:27

0

There are n number of solutions for your problem.

Set height for the details div
Restict the title to one line with ellipsis and tooltip and so on...

answered Jan 11 '19 at 10:27

Prabhakaran

1,524
2
13
21

How I can set the same height to all items

2 Answers2