Inline-block használata - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

Inline-block használata

Responsive webáruház esetén gyakori feladat, hogy a megjelenített tartalmak információs blokkokba rendezve, egymást követő téglalap alakú területeken jelenítsük meg.

Erre alapvetően két technikát használhatunk:

Inline-block-ok használata
Úsztatott blokkok használata

Inline-block-ok használatának előnye:

Az egymást követő blokkok függőlegesen igazíthatóak (Lásd: vertical-align )
Az egy sorban található blokkok vízszintesen is igazíthatóak (Lásd: text-align )
Nem kell félni attól, hogy a különböző méretű blokkok fennakadnak az előző sor magasabb blokkjain.
Lehetőséget ad felbontásfüggő oldalszerkezet kialakítására.

Inline-block-ok használatának hátránya:

Nem futtatható körbe szöveggel. Minden blokk úgy viselkedik mint egy nagyra nőtt betű.

1. Példa:

Forráskód

...
<style type="text/css"> 
...
  /* Az információ blokkok beállítása */
    #tartalom .InfoBlokk {
       display:inline-block;
       width:80px; 
       background-color:#033;color:#fff; 
       margin:2px; padding:5px;
       vertical-align:top;
    }
</style>   ....
<body>
   <div id="tarolo"> 
     <input type='checkbox' name='chmenu' id='chmenu' value='chmenu' >       
     <header id="fejlec"> Webáruház neve és lógója </header>
     <nav id="menu">
        <label for='chmenu'  id='MenuLabel' >Menü</label>
        Termékek | Vásárlás | Kapcsolatok
     </nav>
     <div id="balmenu"> 
       <br>
       <b>Kínálat</b>
       <ul> 
         <li>PC</li>
         <li>Laptop</li>     
         <li>Táblagép</li>     
       </ul>
     </div>  
     <div id="tartalom">
       <p>Az oldal tartalma ... </p>    
       <div class="InfoBlokk"> szöveg ... </div>
       <div class="InfoBlokk"> szöveg ... </div>
       <div class="InfoBlokk"> szöveg ... </div>
       <div class="InfoBlokk"> szöveg ... </div>
       Az oldal további tartalma ...  szöveg ...<
       <p> szöveg szöveg szöveg szöveg szöveg szöveg...  </p>
     </div>
     <footer id="lablec"> Céginfó, jogi információk</footer>
   </div>     
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: inline_block_webaruhaz.html