| Autor | Zpráva | ||
|---|---|---|---|
| gix Profil * |
#1 · Zasláno: 26. 9. 2010, 16:27:50
Ahoj. Mám následující layout:
<div> <div style="float:left">text</div> <div style="float:left"></div> </div> Potřeboval bych aby měl ten druhý div s float:left stejnou výšku jako ten první s textem a dynamickou výškou. Jak to udělat? |
||
| Str4wberry Profil |
#2 · Zasláno: 26. 9. 2010, 16:37:14
Ukaž obrázek, jak by to mělo vypadat.
|
||
| panther Profil |
#3 · Zasláno: 26. 9. 2010, 18:32:13
gix:
„Jak to udělat?“ obrázkem na pozadí nadřazeného elementu. Pokud mají mít oba sloupce variabilní výšku (=není zadána), nikdy stejně vysoké nebudou, což ničemu nevadí, neboť to na první pohled nebude vidět. |
||
| gix Profil * |
#4 · Zasláno: 26. 9. 2010, 19:06:32
Mělo by to vypadat takto:
.................. . . . .................. Kde v prvním divu bude text a druhý stejně vysoký na něj bude navazovat. Ten druhý by teoreticky ani nemusel být tak vysoký ale musí být zarovnaný dole. Důvod je ten, že potřebuju zaoblený roh směrem ven, ale to border-radius neumožňuje. Proto nebude mít první div border-radius, ale ten druhý ano vlevo dole. Nemůžu to řešit pozicováním ,protože to některé prohlížeče nepodporují a pak to vypadá špatně když je někde uprostřed textu čtvrtkružnice. Pokud by ale byly dva divy vedle sebe, tak i kdyby prohlížeč nepodporovat css3/border-radius, tak by se stalo jen to, že by se ten zaoblený roh nezobrazil. |
||
| panther Profil |
#5 · Zasláno: 26. 9. 2010, 19:08:18 · Upravil/a: panther
gix:
„Nemůžu to řešit pozicováním ,protože to některé prohlížeče nepodporují“ prosím? Měl bys příklad, který prohlížeč nepodporuje pozicování? Jestli ti nestačí to, co bylo napsáno výše, ukaž reálný příklad, ne nějakých pár teček se sáhodlouhým popisem, který není moc srozumitelný. |
||
| gix Profil * |
#6 · Zasláno: 26. 9. 2010, 19:47:54
|
||
| panther Profil |
#7 · Zasláno: 26. 9. 2010, 19:51:06
gix:
toto by šlo řešit obrázkem na pozadí, případně pozicováním. |
||
| gix Profil * |
#8 · Zasláno: 26. 9. 2010, 19:52:23
Nakonec jsem to vyřešil tím, že nadřazený div má display jako table a vnořené divy table-cell, snad to tak bude fungovat všude.
|
||
| panther Profil |
#9 · Zasláno: 26. 9. 2010, 19:52:51
gix:
„snad to tak bude fungovat všude.“ nebude, ale to si můžeš snadno sám ověřit. |
||
| gix Profil * |
#10 · Zasláno: 26. 9. 2010, 20:13:16
Vyzkoušel a funguje ve firefoxu, opeře, chromiu, konqueroru:
<div style="display: table; position:relative; bottom: -1px; z-index: 1"> <div style="display: table-cell; margin: 0px; padding: 6px; border: 1px solid black; border-bottom: none; border-top-left-radius: 10px 8px; -moz-border-radius-topleft: 10px 8px; border-top-right-radius: 10px 8px; -moz-border-radius-topright: 10px 8px; background: #c3fb74; color: #000; font-size: 12pt"> <input type="checkbox" />jmeno </div> <div style="border: none; display:table-cell; vertical-align: bottom"> <div style="border: none; display: block; margin: 0px; position:relative; left:-1px; width:8px; height:8px; background: #c3fb74"> <div style="border-left:1px solid black; border-bottom:1px solid black; display: block; margin: 0px; width:7px; height:7px; border-bottom-left-radius: 8px; -moz-border-radius-bottomleft: 8px; background: #ddd"></div> </div> </div> </div> Pokud někde ve starším prohlížeči nebudou fungovat ty radiusy, tak to nevadí, takhle by to snad layout rozházet nemělo. |
||
| panther Profil |
#11 · Zasláno: 26. 9. 2010, 21:14:46
gix:
„Vyzkoušel a funguje ve firefoxu, opeře, chromiu, konqueroru:“ V IE jsi nekoukal, že? S tím kódem, co jsi zde ukázal, by ses divil nejen ve starších IE, ale i v aktuální, osmé verzi. |
||
| gix Profil * |
#12 · Zasláno: 27. 9. 2010, 00:53:14
Nemám možnost vyzkoušet to v IE, s čím má konkrétně problém?
|
||
| Bubák Profil |
#13 · Zasláno: 27. 9. 2010, 01:24:32 · Upravil/a: Bubák
gix:
„Nemám možnost vyzkoušet to v IE“ Tak si nech udělat screenshoty, třeba na http://totalvalidator.com/validator/Validator nebo na http://browsershots.org „čím má konkrétně problém?“ Minimálně s tím, že IE umí tabulkové hodnoty CSS vlastnosti "display" až od verze 8. http://msdn.microsoft.com/en-us/library/ms530751(v=vs.85).aspx |
||
|
Časová prodleva: 14 let
|
|||
0