I've got a issue related with align, inline-block, picture, and font

Question

Please check the image above, the 3,4th pictures slightly spill out. and I think it is because of h4, when the browser is reduced, it overflowed and make next line. I want to align that evenly. How can i solve this?

.items {
  width: 23.2%;
  margin-right: 1.2%;
  display: inline-block;
  position: relative;
}

.items:nth-child(5n) {
  margin-right: 0;
}

.items span:first-child {
  position: absolute;
}

.items h4 {
  font-size: 0.9em;
  width: 100%;
  padding: 10px 0 0 0;
}

.items img {
  width: 100%;
}

.items img.star {
  width: auto;
}

.items span:last-child {
  display: block;
  font-size: 0.8em;
}

<article class="shop_best">
  <div class="line_sec">
    <span></span>
    <h3>베스트셀러</h3><span></span>
  </div>
  <div class="items">
    <span><img src="images/best_sell1_2.png"></span>
    <img src="images/best_sell1.jpg">
    <h4>메모리즈 바디오일 – 100ml</h4>
    <img src="images/rate_5.png" class="star" alt="rating">
    <span>28,000원<span>
                </div>
                <div class="items">
                    <span><img src="images/best_sell2_2.png"></span>
    <img src="images/best_sell2.jpg">
    <h4>스킨 리파잉 크림 클렌저 – 60ml</h4>
    <img src="images/rate_4.png" class="star" alt="rating">
    <span>54,000원<span>
                </div>
                <div class="items">
                    <span><img src="images/best_sell3_2.png"></span>
    <img src="images/best_sell3.jpg">
    <h4>아로마테라피 시너지 바디오일 – 100ml</h4>
    <img src="images/rate_4.png" class="star" alt="rating">
    <span>29,000원<span>
                </div>
                <div class="items">
                    <span><img src="images/best_sell4_2.png"></span>
    <img src="images/best_sell4.jpg">
    <h4>인블룸 그린 버베나 프레이그런스 디퓨저 – 300ml</h4>
    <img src="images/rate_5.png" class="star" alt="rating">
    <span>42,000원<span>
                </div>

Answer 1

For me, the most flexible solution was to use a jQuery based adjustment. If you always have the same content, you can certainly work with orientations in CSS. But if the content is different or is dynamically updated, I recommend the following method.

In your html file

At first, you have to pack all headline elements in a container and give them the same class name.

<div class="headline">
<h4> My Headline </h4>
</div>

In your jQuery file

This function checks every element with same class, searches for the element, which has the heighest space (i.e. if a linebreak was necessary) and set all the elements to this height. So all headlines get the same space.

function equal_height() {
  var highest_element = 0;

  // Lösche die Höhe
  $('.headline').each(function() {
    $(this).removeAttr('style');
  });

  // Prüfe, welches Element am höchsten ist
  $('.headline').each(function() {
    if ($(this).height() > highest_element) {
      highest_element = $(this).height();
    }
  });

  // Weise diese Höhe allen Elementen zu.
  $('.headline').each(function() {
    $(this).height(highest_element);
  });
};

/*Load Function after all CSS loaded*/
$(window).on('load',function(){
   equal_height();
});

/*Fire Function when Resizing*/
var resizeTimer;
$(window).on('load', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(equal_height, 100);
});

For me, it works perfectly with dynamic content. All the headline are set to equal space, based on the element with the most space. After that, centering should be quiet easy with css.

I hope it helped. Of course I can answer questions.

PS: You can view the same principle on my website https://www.baumarktaktion.de.