Layout kialakítása úsztatással

Egy webes alkalmazás, vagy weboldal felületének kialakítása esetén felmerül annak az igénye, hogy elemeket helyezzünk el egymás mellett. Jellemző példa erre a weboldalak fő, és alárendelt tartalmi blokkjai, a lényegi tartalom oszlopa mellett helyezkedik el jobb vagy bal oldalon az oldalsáv, vagy oldalsó panel:
Ahhoz hogy a fő tartalmi részt, a main-t, és az oldalsó panelt, az aside-ot egymás mellé tudjuk rendezni meg kell határozni a szélességüket, erre a legmegfelelőbb a százalékos méretezés, úgy hogy az egymás mellé úsztatott elemek szélessége ne haladja meg a 100%-ot.
1
main {
2
    width: 70%;
3
}
4
​
5
aside {
6
    width: 30%;
7
}
Copied!
A következő lépésben úsztatjuk az elemeket, balra, és jobbra.
1
main {
2
    float: left;
3
    width: 70%;
4
}
5
​
6
aside {
7
    float: right;
8
    width: 30%;
9
}
Copied!
Az irányok felcserélésével a vizuális sorrendet tudjuk szabályozni.
Az úsztatott elemek után következő elemek megjelenítése eltérhet a megszokottól, ebben az estben érdemes clearfix-et használni, vagy a soron következő elemre elhelyezni egy clear: both CSS tulajdonságot.
1
footer {
2
    clear: both;
3
}
Copied!
A következő példában egy weboldal főbb szerkezeti elemeinek szervezését tekinthetjük át:
layout.html
layout.css
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
    <title>Flex Layout</title>
8
    <link rel="stylesheet" href="layout.css">
9
</head>
10
<body>
11
    <div class="container">
12
        <header>header</header>
13
        <main>main</main>
14
        <aside>aside</aside>
15
        <footer class="cf">footer</footer>
16
    </div>
17
</body>
18
</html>
Copied!
1
/* Konténer középre rendezése */
2
.container {
3
    margin-left: auto;
4
    margin-right: auto;
5
    max-width: 960px;
6
}
7
​
8
/* Fő tartalmi elemek stílusa */
9
header {
10
    height: 120px;
11
    background-color: #339af0;
12
}
13
​
14
main {
15
    float: right;
16
    width: 70%;
17
​
18
    background-color: #51cf66;
19
    min-height: calc(100vh - 240px);
20
}
21
​
22
aside {
23
    float: left;
24
    width: 30%;
25
​
26
    background-color: #fcc419;
27
    min-height: calc(100vh - 240px);
28
}
29
​
30
footer {
31
    clear: both;
32
​
33
    height: 120px;
34
    background-color: #ff6b6b;
35
}
Copied!
Konténer középre rendezése
Clearfix

CSS technikák - Previous

Vízszintes menü úsztatással

Next - CSS technikák

Clearfix

Last modified 2yr ago

Export as PDF

Copy link