我有一个与对齐、内联块、图片和字体相关的问题

Question

请检查上图，第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>

Answer 1

这是因为产品名称的长度，你的箱子被拉了起来。将所有框包装在一个单独的 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>

Answer 2

将您的项目包装在 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>

Answer 3

对我来说，最灵活的解决方案是使用基于 jQuery 的调整。如果您总是拥有相同的内容，那么您当然可以使用 CSS 中的方向。但是如果内容不一样或者是动态更新的，我推荐下面的方法。

在您的 html 文件中

首先，您必须将所有标题元素打包在一个容器中，并为它们指定相同的 class 名称。

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

在您的 jQuery 文件中

此函数检查具有相同 class 的每个元素，搜索具有最高 space 的元素（即是否需要换行符）并将所有元素设置为此高度。所以所有的标题都是一样的 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);
});

对我来说，它非常适合动态内容。根据具有最多 space 的元素，所有标题都设置为等于 space。在那之后，使用 css.

居中应该很容易

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

PS:同理可以到我的网站查看https://www.baumarktaktion.de.

我有一个与对齐、内联块、图片和字体相关的问题

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

html

css

inline

overflow

display