html - 设置“溢出：自动；” 以某种方式神奇地修复了布局问题

问题描述

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

这里唯一“正确”的 div 是从其余部分中脱颖而出的那个。当我添加overflow: auto;它时，它是固定的：

这是HTML（我很早就剪掉了它，因为它只是开始为每个“正方形”重复自己）：

<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 类：

#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;能够解决我所有的问题。

标签： htmlcsslayoutoverflow

解决方案

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

通过我的小实验，您可以看到基线上附加了 3 张图像。您可以删除溢出： auto; 在我的片段中创建相同的效果。

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

你可能有疑问，你的图片大小一样，不应该有这种效果。我猜背景颜色：白色；在.item-card中涵盖了您的实际图片尺寸。尝试更改颜色，看看我的假设是否正确。

附言。如果你想从 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>

html - 设置“溢出：自动；” 以某种方式神奇地修复了布局问题

问题描述

解决方案

推荐阅读