gpt4 book ai didi

html - 如何将右边距/填充应用于此水平滚动元素?

转载 作者:搜寻专家 更新时间:2023-10-31 22:24:13 26 4
gpt4 key购买 nike

<分区>

我有一个水平滚动的 div,其左右内边距为 100 像素。左填充似乎工作正常。但是,右侧不可见。此外,最后一部分的 50px 右边距也不见了。

我错过了什么?为什么不遵守正确的填充和边距?

body {
margin: 0;
}

div {
width: 100vw;
display: flex;
overflow: auto;
padding: 0 100px;
box-sizing: border-box;
}

section {
flex: 0 0 auto;
width: 300px;
margin: 0 15px;
height: 300px;
background: red;
}
<div>
<section></section>
<section></section>
<section></section>
</div>

更新

根据@chaitanya swami 的建议,以下是解决方法。我仍然想知道为什么上面没有按预期工作。

body {
margin: 0;
}

#wrapper {
width: 100vw;
overflow: auto;
}


#carousel {
display: flex;
padding: 0 100px;
width: calc(100vw + 400px);
}

.slide {
flex: 0 0 auto;
width: 300px;
margin: 0 15px;
height: 300px;
background: red;
}
<div id="wrapper">
<div id="carousel">
<section class="slide"></section>
<section class="slide"></section>
<section class="slide"></section>
</div>
</div>

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com