| Autor | Zpráva | ||
|---|---|---|---|
| RRRadek Profil |
#1 · Zasláno: 14. 12. 2020, 09:47:49
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 |
#2 · Zasláno: 14. 12. 2020, 10:36:11
Podle popisu se zeptám - proč nevyřešit borderem, když to má být přímo "na obrázku"?
|
||
| Kajman Profil |
#3 · Zasláno: 14. 12. 2020, 10:45:41
Jako první bych zkusil odstranit bílé znaky mezi tagy.
|
||
| RRRadek Profil |
#4 · Zasláno: 14. 12. 2020, 10:47:22
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 |
#5 · Zasláno: 14. 12. 2020, 11:05:26
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 |
#6 · Zasláno: 14. 12. 2020, 23:47:20
Radek9:
Pokud se nastaví pro DIV line-height: 0; pak to asi bude fungovat i v IE6, a to je fuj!
|
||
|
Časová prodleva: 4 roky
|
|||
0