Autor Zpráva
RRRadek
Profil
Už vážně nevím jak to funguje, pokud je obrázek vyšší nez 20px tak mám obrázky u sebe nalepené a pokud je menší tak se vytvoří mezera.
Jak docílit toho aby červená linka byla nalepená u obrázků jako je tomu u dvou obrázků nahoře?
ps: potřebuji aby byl každý obrázek v samostatném <div>

Ukázka zde

<!DOCTYPE html>
              <html>
                <head>
                  <meta charset="utf-8" />
                  
<title>TEST</title>
                </head>
                <body bgcolor="#A0A0A0"><br />
                  <style type="text/css">

    img {box-shadow: 5px 18px 19px 0px #535353; margin-right: 8px; vertical-align: middle;}

                </style>


                    <div style="position:relative;width:892px;"> <img src="Beti.jpg" alt="background image" width="892" /> </div>

                    <div style="position:relative;width:892px;"> <img src="Beti.jpg" alt="background image" width="892" /> </div>

        <!--linka--><div style="position:relative;width:892px;"> <img src="Cervena.jpg" alt="background image" width="892"/> </div>

                    <div style="position:relative;width:892px;"> <img src="Beti.jpg" alt="background image" width="892" /> </div>
                  

</body></html>
Ikki
Profil
Podle popisu se zeptám - proč nevyřešit borderem, když to má být přímo "na obrázku"?
Kajman
Profil
Jako první bych zkusil odstranit bílé znaky mezi tagy.
RRRadek
Profil
Tak jsem na to přišel :-)
Přidal jsem nový styl pro IMG a to display: flex;

Výsledek :-)

<!DOCTYPE html>
              <html>
                <head>
                  <meta charset="utf-8" />
                  
<title>TEST</title>
                </head>
                <body bgcolor="#A0A0A0"><br />
                  <style type="text/css">

    img {box-shadow: 5px 18px 19px 0px #535353; margin-right: 8px; vertical-align: middle;}
    img.cervena {display: flex;}

                </style>


                    <div style="position:relative;width:892px;"> <img src="Beti.jpg" alt="background image" width="892" /> </div>

                    <div style="position:relative;width:892px;"> <img src="Beti.jpg" alt="background image" width="892" /> </div>

        <!--linka--><div style="position:relative;width:892px;"> <img img class="cervena" src="Cervena.jpg" alt="background image" width="892"/> </div>

                    <div style="position:relative;width:892px;"> <img src="Beti.jpg" alt="background image" width="892" /> </div>
                  

</body></html>
Radek9
Profil
RRRadek:
Úplně by stačilo display: block; Víš, proč se to děje? <img> je inline element. Vztahují se na něj tedy i některé vlastnosti textu, v tomto případě line-height obalového <div>u. Stačí tedy obrázek buď změnit na blokový, nebo obalovému <div>u nastavit line-height: 0;
Bubák
Profil
Radek9:
Pokud se nastaví pro DIV line-height: 0; pak to asi bude fungovat i v IE6, a to je fuj!

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0