我遇到了与对齐、内联块、图片和字体相关的问题 [重复]答案

【问题标题】：I've got a issue related with align, inline-block, picture, and font [duplicate]我遇到了与对齐、内联块、图片和字体相关的问题 [重复]
【发布时间】：2023-03-30 23:38:01
【问题描述】：

请查看上面的图片，第 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>

【问题讨论】：

您的文字在图片 3 和 4 的 2 行上，这就是它们未对齐的原因。在第二组图片上，文字也在 2 行，这就是显示 OK 的原因。因此，由您决定。我会为文本设置一个固定的高度，以便始终有空间让文本显示在 2 行上。
所有你需要的是vertical-align:top to your elements

标签： html css overflow inline display

【解决方案1】：

对我来说，最灵活的解决方案是使用基于 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查看相同的原理。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：