Question

我正在制作一个带有flexbox布局的购物中心网站，但是flexbox会在某些方面造成问题。

Flexbox似乎在某些区域进行水平滚动，但我不想这样做。

Answer 1

您的问题是横幅中的图像太宽而无法容纳在大多数视口中，因此它们会强制页面更宽。

没有简单的方法可以完全用CSS来纠正这种情况，而不会导致图像相互重叠或扭曲图像。宽高比。

这个CSS将修复水平滚动，但它会压缩第一张和最后一张图像：

.dittomall-banner img {
  width: 33%;
}

要真正解决问题以使图像能够保持原始宽高比并且不会导致页面太宽，您应该编辑图像以便紧密裁剪，然后使用background-color { {1}}与第一张和第三张图片中的背景颜色相同。然后，将图像置于横幅中心。

假设您裁剪图像以使它们的大小相同（例如，300px x 100px），您的最终HTML和CSS可能如下所示：

HTML：

.dittomall-banner

CSS：

<div class="dittomall-banner">
  <div class="banner-inner-wrapper">
    <img src="http://www.dittomall.com/theme/dittomall/img/banner1.png" alt="banner1">
    <img src="http://www.dittomall.com/theme/dittomall/img/banner2.png" alt="banner2">
    <img src="http://www.dittomall.com/theme/dittomall/img/banner3.png" alt="banner3">
  </div>
</div>

Answer 2

如果您希望根据屏幕尺寸更改横幅尺寸，请尝试此操作。请使用以下代码替换您的CSS：

    html,body {
        margin:0;
        padding:0;
    }
    body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 100 vh;
        align-items:center;
        overflow:hidden;
    }
    header {
        flex: 1 100 %;
    }
    .dittomall-banner {
        display: flex;
        flex: 1 100%;
    }
    img {
        width:100%;
    }

希望这会有所帮助！

Flexbox进行水平滚动

2 个答案: