Pagina 1 din 1
Div-uri aliniate pe orizontala, cu Scroll Orizontal
Scris: Dum Sep 15, 2013
de kaZZ
Vreau si eu sa fac un site cu design metro dar nu stiu exact cum sa explic. Vreau sa se duca Div-urile spre dreapta pe orizontal cand au ajuns in josul pagini, sa nu mai continuie sa o ia dinou de sus.
Spec ca intelegeti daca nu uitati un exemplu la pagina de la adresa asta:
theme.crumina.net/index.php?theme=onetouch
Vreau ceva gen de acolo, putin de jos unde are scroll-ul albastru.
Div-uri aliniate pe orizontala, cu Scroll Orizontal
Scris: Dum Sep 15, 2013
de MarPlo
Salut
Se poate cu cateva proprietati CSS. Div-urile sa fie toate intr-un Div parinte (container), iar acesta sa aibe setat in CSS o inaltime fixa, lungime 100% (sau cat vrei), pentru scroll -
overflow-x: auto; iar ca sa nu treca pe un nou rand, se adauga -
white-space: nowrap; .
La Div-urile din container se seteaza in CSS
display: inline-block; (ca sa fie afisate in linie).
Vezi codul din acest exemplu, il poti testa si modifica dupa cum stii ca iti trebuie la site-ul tau.
Cod: SelectaĊ£i tot
<style type="text/css">
#container {
position: relative;
height: 14em;
width: 99%;
margin: 2px auto;
text-align: left;
overflow-x: auto;
white-space: nowrap;
}
#container div {
display: inline-block;
width: 16em;
height: 11em;
margin: 0.5em;
border: 1px solid blue;
padding: 2px;
white-space:normal;
text-align: center;
}
</style>
<div id="container">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
</div>