时间戳

首页 > 解决方案 > 如何忽略容器的宽度，向右溢出，而不破坏页面？

css - 如何忽略容器的宽度，向右溢出，而不破坏页面？

问题描述

我希望能够将滑块放在左侧的容器内，但忽略右侧宽度并全角而不离开页面（html/body）。

我已经尝试了一切，但无法修复它。

我有一个 bootstrap 5 容器，我想在其中有一个猫头鹰滑块或任何与此相关的东西。

我试过溢出，空白，宽度：100%；

<div class="container">
<div class="overflow-slider">
    @for ($i = 0; $i < 7; $i++)
    <img src="https://via.placeholder.com/150" class="yeah">
    @endfor
</div>
</div>

.container {
        position: relative;
    }
    .overflow-slider {
        display: flex;
        overflow: auto;
        position: absolute;
        white-space: nowrap;
        width: 100vw;
    }

这就是我想要实现的目标，而不是离开页面，但现在它一直向右移动并打破页面。

这是我的

这就是我想要的

这就是我想要的

这就是我想要的

标签： css

解决方案

希望今天能帮到你，你好，欢迎！您需要将图像包装在 div 中以使 flexbox 正常工作，如下所示：

<style>
.container {
    /*
    position: relative;
    */
}
.overflow-slider {
    display: flex;
    /*
    overflow: auto;
    position: absolute;
    white-space: nowrap;
    */
    width: 100%;
}
.overflow-slider div {
    flex:1 1 100%;
}
.overflow-slider img {
    max-width:100%;
}
</style>


<div class="container">
    <div class="overflow-slider">
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
    </div>
</div>

请让我知道它是怎么回事:)

推荐阅读