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!
Last modified 2yr ago
Export as PDF
Copy link