امیرحسین سلیمانی
1 سال پیش
توسط امیرحسین سلیمانی
مطرح شد
همه آیتم ها اسکرول نمی خورند هر چه عرض دیوایس کوچیکتر میشه
سلام من یک اسکرول افقی میخوام داشته باشم برای نمایش عکس ها ، ولی موقع پیاده سازیش به یک مشکلی میخورم . اینه که به شکل کامل اسکرول نمیخوره و بعضی از آیتم ها میرن اون ته قایم میشن و ظاهر نمیشن متاسفانه .
کد html:
<body>
<div class="navbar"></div>
<div class="header"></div>
<div class="section1">
<div class="box">
<img src="./images/3.jpg" alt="">
</div>
<div class="box">
<img src="./images/4.jpg" alt="">
</div>
<div class="box">
<img src="./images/8.jpg" alt="">
</div>
<div class="box">
<img src="./images/2.jpg" alt="">
</div>
<div class="box">
<img src="./images/5.jpg" alt="">
</div>
<div class="box">
<img src="./images/1.jpg" alt="">
</div>
<div class="box">
<img src="./images/6.jpg" alt="">
</div>
</div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
<div class="section5"></div>
<div class="footer"></div>
</body>کد css :
html {
font-size: 100%;
}
body {
display: flex;
flex-direction: column;
background-color: darkred;
}
.navbar {
height: 75px;
background-color: black;
}
.header {
height: 400px;
background-color: blue;
margin-bottom: 2.5rem;
}
.section1 {
height: 350px;
width: calc(100% - 20%);
margin: 10%;
background-color: wheat;
margin-bottom: 2.5rem;
display: flex;
flex-direction: row;
overflow-x:auto;
overflow-y: hidden;
justify-content: center;
scroll-snap-align: start;
scroll-snap-type: x mandatory;
}
.section1 > *{
flex-basis: 180px;
max-height: 200px;
flex-grow: 1;
}
.box {
margin-right: 1rem;
scroll-snap-align: end;
scroll-margin-inline: 3rem;
}موقعی که در بیشترین عرض صفحه قرار داریم همه آیتم ها نمایش داده میشن :
موقعی که عرض های کوچکتر میریم :
همونطور که می بینید از سمت راست اسکرول به آخر رسیده ولی دو آیتم آخر رو نصفه یا اصلا نشون نمیده .
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
گزارش تخلف
کپی کردن
0