gpt4 book ai didi

html - 为什么这是垂直滚动而不是水平滚动?

转载 作者:太空宇宙 更新时间:2023-11-03 20:05:44 24 4
gpt4 key购买 nike

我试图让这段代码水平滚动,但由于某种原因它垂直滚动。将光标放在图像上并向下滚动以了解我的意思。

我怎样才能让它水平滚动呢?它有溢出 x 作为滚动。因此,所有图像都将位于同一行,而不是像现在这样的 2 行。

#images-wrap {
width: 100%;
height: auto;
margin-top: 25px;
float: left;
position: relative;

position: static;
}
#main-image {
width: 80.5%;
float: left;
background-size: cover !important;
background-position: center center !important;
height: auto;
padding-bottom: 53.666%;

width: 100%;
padding-bottom: 66.666%;
}
#image-thumbs {
width: 17.5%;
height: auto;
float: left;
margin-left: 2%;
overflow-y: auto !important;
overflow-x: hidden;
position: absolute;
right: 0;
height: 100%;

width: 100%;
margin-left: 0;
position: absolute;
height: auto;
top: 0;
left: 0;
}
.image-thumb {
margin-bottom: 6px;
background-position: center;
background-size: cover;
width: 100%;
height: auto;
padding-bottom: 66.666%;

width: 25%;
padding-bottom: 16.666%;
float: left;
}

#test-ar {
float: left;
width: 100%;
height: auto;
padding-bottom: 16.666%;
background: orange;
position: relative;
overflow-x: scroll;
/* overflow-y: hidden; */
}
<div id="images-wrap">
<div id='test-ar'>
<div id="image-thumbs" style="overflow: hidden;">
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/394545.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/572806.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
</div>
</div>
</div>

最佳答案

不是 float 元素,而是对所有图像缩略图使用 display: inline-block,并使用 white-space: nowrap 将其父级设置为不包装内联元素.要删除各个图像缩略图之间的空白,您可以简单地注释掉该行:

#images-wrap {
width: 100%;
height: auto;
margin-top: 25px;
float: left;
}
#image-thumbs {
height: auto;
margin-left: 2%;
right: 0;
height: 100%;

width: 100%;
margin-left: 0;
position: absolute;
height: auto;
top: 0;
left: 0;

overflow-x: scroll;
white-space: nowrap;
}
.image-thumb {
margin-bottom: 6px;
background-position: center;
background-size: cover;
width: 100%;
height: auto;
padding-bottom: 66.666%;

width: 25%;
padding-bottom: 16.666%;
display: inline-block;
}

#test-ar {
width: 100%;
padding-bottom: 16.666%;
background: orange;
position: relative;
overflow-x: scroll;
}
<div id="images-wrap">
<div id='test-ar'>
<div id="image-thumbs">
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/394545.jpg')"></div><!--
--><div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/572806.jpg')"></div><!--
--><div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div><!--
--><div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div><!--
--><div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div><!--
--><div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div><!--
</div>
</div>
</div>

关于html - 为什么这是垂直滚动而不是水平滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50142515/

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