Minden segítség jól jöhet wordpress weboldal készítésekor. Akár egy morzsányi is...

Két kép, két hirdetési doboz egymás mellett a weboldalon

2015/11/09. - írta: ponthogy

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!

Címkék: tech css
Szólj hozzá!

A bejegyzés trackback címe:

https://wpmorzsa.blog.hu/api/trackback/id/tr368064990

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.

Nincsenek hozzászólások.
süti beállítások módosítása