I want to get the images (they're divs) inside the orange div to not go to the next line, and instead have overflow-y to scrolling. The problem is, the 2 last images drop below rather than beside. See the orange div by scrolling down over the bottom images .
The images-wrap is absolutely positioned inside the test-ar div, which somehow adjusts the height of the test-ar div. I thought placing an absolute div inside a relative div won't resize the relative div, otherwise the relative test-ar div would be the perfect size with a responsive 1/6 aspect ratio maintained.
I've tried, maybe incorrectly, setting whitespace to have no wrap, displaying inline, overflow-y, etc but to no avail. Any ideas? Please, no flex!
An explanation would be very helpful here, thanks!
#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="main-image" style="background-image: url("https://cml.sad.ukrd.com/image/572806.jpg");"></div> <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>
You are setting the width of each .image-thumb
to 25% of its parent. Letting only 4 fit the container in a row.
You can use width: calc(100% /6);
or width: 16.66%;
to fix the layout.
Hope this helps :)
#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: calc(100% /6); 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="main-image" style="background-image: url("https://cml.sad.ukrd.com/image/572806.jpg");"></div> <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>
One way to solve it is using flex something like:
#image-thumbs {
display: flex;
width: 100%;
height: 150px;
}
.image-thumb {
flex: 1;
height: 100%;
background-position: center;
background-size: cover;
}
Changed only those 2 styles, removed floats and width, you should play with the height to the desired amount.
Or using floats:
#image-thumbs {
background-color: red;
width: 100%;
height: 150px;
}
.image-thumb {
width: 16.66666%;
height: 100%;
background-size: cover;
background-position: center;
float: left;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.