There is a code:
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Закладки на чистом CSS</title> <link rel='stylesheet' href='css/style.css'> <style> .tabs { position: relative; min-height: 200px; /* This part sucks */ clear: both; margin: 25px 0; } .tab { float: left; } .tab label { background: #eee; padding: 10px; border: 1px solid #ccc; margin-left: -1px; position: relative; left: 1px; } .tab [type=radio] { display: none; } .content { position: absolute; top: 28px; left: 0; background: white; right: 0; bottom: 0; padding: 20px; border: 1px solid #ccc; overflow: hidden; } .content > * { opacity: 0; -webkit-transform: translate3d(0, 0, 0); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; } [type=radio]:checked ~ label { background: white; border-bottom: 1px solid white; z-index: 2; } [type=radio]:checked ~ label ~ .content { z-index: 1; } [type=radio]:checked ~ label ~ .content > * { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } </style> </head> <body> <div id="page-wrap"> <div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Закладка №1</label> <div class="content"> <p>Содержание закладки №1</p> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">Закладка №2</label> <div class="content"> <div class="dropp"> <div id="element1" class="img"><div class="delete"></div><img src="img/1.png" /><div class="resaze"></div></div> <div id="element2" class="img"><div class="delete"></div><img src="img/2.png" width="250" height="140" /><div class="resaze"></div></div> <div id="element3" class="img"><div class="delete"></div><img src="img/3.png" width="249" height="31" /><div class="resaze"></div></div> <div id="element4" class="img"><div class="delete"></div><img src="img/4.png" width="250" height="143" /><div class="resaze"></div></div> <div id="element5" class="img"><div class="delete"></div><img src="img/5.png" width="551" height="245" /><div class="resaze"></div></div> <div id="element6" class="img"><div class="delete"></div><img src="img/6.png" width="250" height="140" /><div class="resaze"></div></div> <div id="element7" class="img"><div class="delete"></div><img src="img/7.png" width="94" height="19" /><div class="resaze"></div></div> <div id="element8" class="img"><div class="delete"></div><img src="img/8.png" width="151" height="19" /><div class="resaze"></div></div> <div id="element9" class="img"><div class="delete"></div><img src="img/9.png" width="112" height="19" /><div class="resaze"></div></div> <div id="element10" class="img"><div class="delete"></div><img src="img/10.png" width="169" height="19" /><div class="resaze"></div></div> <div id="element11" class="img"><div class="delete"></div><img src="img/11.png" width="81" height="31" /><div class="resaze"></div></div> <div id="element12" class="img"><div class="delete"></div><img src="img/12.png" width="171" height="164" /><div class="resaze"></div></div> <div id="element13" class="img"><div class="delete"></div><img src="img/13.png" width="171" height="165" /><div class="resaze"></div></div> <div id="element14" class="img"><div class="delete"></div><img src="img/14.png" width="22" height="150" /><div class="resaze"></div></div> <div id="element15" class="img"><div class="delete"></div><img src="img/15.png" width="100" height="32" /><div class="resaze"></div></div> <div id="element16" class="img"><div class="delete"></div><img src="img/16.png" width="100" height="32" /><div class="resaze"></div></div> <div id="element17" class="img"><div class="delete"></div><img src="img/17.png" width="100" height="31" /><div class="resaze"></div></div> <div id="element18" class="img"><div class="delete"></div><img src="img/18.png" width="100" height="31" /><div class="resaze"></div></div> </div> </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">Закладка №3</label> <div class="content"> <p>Содержание закладки №3</p> <img src="http://placedog.com/200/100"> </div> </div> </div> </body> </html> How to make a scroll on each tab in X? (since it is supposed to fill them with a certain number of images), and it is also necessary that they are scrolled for viewing.
