我遇到了与对齐，内联块，图片和字体有关的问题

问题描述

请检查上面的图像，第3,4张照片稍微溢出。我认为是因为h4，当浏览器缩小时，它溢出并进入下一行。我想将其均匀对齐。我该如何解决？

.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>

解决方法

将项目包装在1 div中，然后将以下CSS添加到div

    display: flex;
    flex-wrap: wrap;

就像这样：

<div style="display: flex;flex-wrap: wrap;">
  <div class="items">..</div>
  <div class="items">..</div>
  <div class="items">..</div>
</div>

,

对我来说，最灵活的解决方案是使用基于jQuery的调整。如果您始终拥有相同的内容，那么您当然可以在CSS中使用方向。但是，如果内容不同或动态更新，则建议使用以下方法。

在您的html文件中

首先，您必须将所有标题元素打包到一个容器中，并为其赋予相同的类名。

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

在您的jQuery文件中

此函数检查具有相同类的每个元素，搜索具有最大空格（即是否需要换行）的元素，并将所有元素设置为此高度。因此，所有头条新闻都有相同的空间。

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);
});

对我来说，它与动态内容完美结合。所有标题都将根据具有最大间距的元素设置为相等的间距。之后，使用CSS即可轻松实现居中。

我希望能有所帮助。我当然可以回答问题。

PS：您可以在我的网站https://www.baumarktaktion.de上查看相同的原理。

,

这是由于产品名称的长度，您的包装箱被拉起了。将所有框包装在单独的div中是合乎逻辑的，因为带框的文章有一个父级。将flex规则设置为父items_box框。

.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;}

/*add this it*/

.items_box {
  display: flex;
  align-items: baseline;
}

<article class="shop_best">
            <div class="line_sec">
                <span></span><h3>베스트셀러</h3><span></span>
            </div>
           <div class="items_box">
            <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>
          </div>
</article>