设置 "overflow: auto;" 以某种方式神奇地修复了布局问题

Question

我有一堆 div 并排放置（取决于 window 大小，每个 "row" 有 2-4 个）。在这些 div 中，我添加了一些包装器等，但是在每个 div 的中心有一个图像，其宽度（不是高度）属性通过 [=38 设置=].发生的奇怪事情是原始 png 中宽度大于高度的图像导致包含它的最外层 div 向下移动。我搜索了一段时间的解决方案，发现在 div 中设置 overflow: auto; 和 class "item-card-wrapper"（见下文）以某种方式神奇地修复了布局。我认为我理解溢出是如何工作的，但我很困惑它似乎如何神奇地解决了这个问题（这不是我遇到的唯一例子） .

这里唯一的 "correct" div 是与众不同的。当我添加 overflow: auto; 它是固定的：

这是 HTML（我很早就剪掉了它，因为它只是开始为每个 "square" 重复）：

<div id="shop">
    <div id="shop-center-wrapper">
        <div class="item-card-wrapper" style="width: 25%; min-width: 200px;">
            <div class="item-card" style="height: 245px;">
                <div class="image-wrapper">
                    <img class="image" src="static/products/Three Kings Glow.png">
                </div>
            </div>
        </div>
        <div class="item-card-wrapper" style="width: 25%; min-width: 200px;">
            <div class="item-card" style="height: 245px;">
                <div class="image-wrapper">
                    <img class="image" src="static/products/Amor Azul.png">
                </div>
            </div>
        </div>
        ...

这里是相关的 CSS classes:

#shop {
    margin-top: 40px;
    margin-left: 50px;
    margin-right: 50px;
    overflow: auto;
}
#shop-center-wrapper {
    text-align: center;
    margin: 0px auto;
}
.item-card-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
    display: inline-block;
    overflow: auto;
}
.item-card {
    width: 92%;
    margin-left: 4%;
    margin-right: 4%;;
    background-color: white;
}
.image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}

我真的只是想了解 overflow: auto; 是如何解决我所有的问题的。

Answer 1

这里的关键属性应该是inline-block in .item-card-wrapper。使用内联块显示，组件将与基线对齐，类似于 vertical-align: baseline;。

通过我的小实验，你可以看到baseline上附加了3张图片。您可以删除溢出：自动；在我的代码片段中创建相同的效果。

通过添加 overflow:auto，item-card-wrapper 的内容应该被裁剪（如果它比它的父级大）以保持与父级相同的高度，因此所有的 item-card-wrapper 组件应该最后是相同的高度。

你可能会有疑问，你的图片大小一样，不应该有这个效果。我猜 background-color: white; in .item-card 覆盖了你的实际图片尺寸。尝试改变颜色，看看我的假设是否正确。

Ps。如果你想从 inline-block 中搜索替代品，带 flex-direction 的 flexbox 可能是另一个不错的选择。

#shop {
    margin-top: 40px;
    margin-left: 50px;
    margin-right: 50px;
    overflow: auto;
  background: green; /* Edited */
  padding: 10px; /* Edited */
}
#shop-center-wrapper {
    text-align: center;
    margin: 0px auto;
}
.item-card {
    width: 92%;
    margin-left: 4%;
    margin-right: 4%;;
    background-color: white;
}
.item-card-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
    display: inline-block;
  overflow: auto; /* Edited */
}
.image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  background: yellow; /* Edited */
}
.image {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}

<div id="shop">
  <div id="shop-center-wrapper">
    <div class="item-card-wrapper" style="width: 25%; min-width: 200px;">
      <div class="item-card" style="height: 245px;">
        <div class="image-wrapper">
          <img class="image" src="https://www.designhill.com/design-blog/wp-content/uploads/2015/02/McDonald-Logo-1.jpg">
        </div>
      </div>
    </div>
    <div class="item-card-wrapper" style="width: 25%; min-width: 200px;">
      <div class="item-card" style="height: 245px;">
        <div class="image-wrapper">
          <img class="image" src="https://d1.awsstatic.com/case-studies/600x400_mcdonalds_logo.58256463615a3353933179883a8c58f593a00880.png">
        </div>
      </div>
    </div>
    <div class="item-card-wrapper" style="width: 25%; min-width: 200px;">
      <div class="item-card" style="height: 245px;">
        <div class="image-wrapper">
          <img class="image" src="https://media-exp1.licdn.com/dms/image/C4E0BAQHWxquJ9PJxvw/company-logo_200_200/0?e=2159024400&v=beta&t=95WVdd_Q6vNKUybW3mX2odTGxRJ30bwKjF9SkeSH96w">
        </div>
      </div>
    </div>
  </div>
</div>

设置 "overflow: auto;" 以某种方式神奇地修复了布局问题

Setting "overflow: auto;" somehow magically fixes layout issues

html

css

layout

overflow