Sokszor kerültem szembe olyan problémával, hogy két képet, vagy két hirdetési egységet kellett volna egymás mellé helyeznem a weboldalon. Egy egyszerű css beállítással egymás mellé tehető két box úgy, hogy még reszponzív is marad az oldal, ha mobiltelefonon, vagy tableten nézzük meg.
A feladat: két hirdetési egységet egymás mellé helyezni az oldalon belül úgy, hogy ha keskenyebb képenyőn nézi valaki, akkor a második box az első alá kerüljön, azaz ne lógjon ki a weblapról.
Megoldás: Definiáljuk az alábbi div elemeket a css-ben:
#container {
max-width: 600px;
margin: auto;
}
#block_1 {
width: 300px;
float: left;
}
#block_2 {
width: 300px;
float: left;
}
#block_3 {
clear: both;
}
Fontos, hogy a containernek ne a width, hanem a max-width tulajdonságát adjuk meg, ez az alapja annak, hogy - jelen esetben - 600px-nél keskenyebb képernyőn a block_2 beilleszkedik a block_1 alá.
A block_3 megtisztítja a kódoktól a lapot miután egymás mellé rendeződtek a boxok.
A html lapon (vagy wordpress szerkesztési nézetben) így hivatkozhatunk rá:
<div id="container">
<div id="block_1">Hirdetés 1</div>
<div id="block_2">Hirdetés 2</div>
</div>
Van jobb megoldásod? Mutasd!
A bejegyzés trackback címe:
Kommentek:
A hozzászólások a vonatkozó jogszabályok értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a Felhasználási feltételekben és az adatvédelmi tájékoztatóban.