Skip to content

Instantly share code, notes, and snippets.

@ramsesoriginal
Created November 28, 2023 10:47
Show Gist options
  • Save ramsesoriginal/496080628f98791036bf241199d5d5b8 to your computer and use it in GitHub Desktop.
Save ramsesoriginal/496080628f98791036bf241199d5d5b8 to your computer and use it in GitHub Desktop.
Horizontally scrolling box
/**
* Horizontally scrolling box
*/
.scrollbox {
/*overflow: hidden;*/
display: block;
outline: 1px solid red;
padding: 0;
margin: 0;
}
.scrollbox.horizontal {
width: 220px;
height: 340px;
}
.scrollbox.horizontal .scroller {
display: inline-flex;
padding: 0;
margin: 0;
outline: 1px solid green;
height: 340px;
}
.scrollbox.horizontal .scrollelement {
display: block;
outline: 1px solid blue;
margin: 10px;
height: 320px;
}
<aside class="scrollbox horizontal imagecontainer" id="scrollbox1">
<div class="scroller">
<figure class="scrollelement">
<img src="https://picsum.photos/200/300" alt="Zufallsbild nummer 1" />
<figcaption>Bild 1</figcaption>
</figure>
<figure class="scrollelement">
<img src="https://picsum.photos/200/300" alt="Zufallsbild nummer 2" />
<figcaption>Noch ein Zufallsbild</figcaption>
</figure>
<figure class="scrollelement">
<img src="https://picsum.photos/200/300" alt="Zufallsbild nummer 2" />
<figcaption>Noch ein Zufallsbild</figcaption>
</figure> </div>
</aside>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment