Autor | Zpráva | ||
---|---|---|---|
Keeehi Profil |
#1 · Zasláno: 24. 5. 2017, 19:18:47
Ahoj,
Ukázka toho, čeho chci dosáhnout. Jde to vyrobit i bez flexboxu? Omezení: - Ta zelená část je nějak velká, není však známo jak. Definuje ji jen velikost obsahu - v ukázce je nastaveno 100px ale může to být jinak. Takže k efektivnímu zmenšení červené části není možné využít margin-right. - Červená část musí být fyzicky zmenšená. Není možné ji jen překrýt zelenou částí. Představte si, že ta červená část má třeba rámeček a ten by tedy na pravé straně chyběl. - Pokud to něčemu pomůže, tak se dá počítat s tím, že je to na jednom řádku. Není tedy třeba řešit, co se stane, když by jeden z obsahů byl vyšší než druhý. Jak jsem ukázal flexboxem to jde. Možná by to šlo tabulkou ale jinak nevím. Díky za každý návrh. |
||
smitka Profil |
#2 · Zasláno: 24. 5. 2017, 21:59:48
Před 10 lety se to řešilo obrázkem na pozadí :-)
smitka.org/programovani/webtriky1 |
||
Keeehi Profil |
#3 · Zasláno: 24. 5. 2017, 22:24:23
Šířka ani jednoho z bloků není známá. Jak by jsi to chtěl udělat obrázkem?
|
||
smitka Profil |
#4 · Zasláno: 24. 5. 2017, 22:59:16
V tom obalovacím divu: 100px široký obrázek zeleného obdelníku (případně s nakresleným borderem) napozicovaný vpravo s opakováním jen v ose y a zbytek červené pozadí.
|
||
Keeehi Profil |
#5 · Zasláno: 24. 5. 2017, 23:52:42
smitka:
Tak znova, žádné rozměry nejsou známé. Těch 100px je jen jako příklad šířky obsahu. Představ si tam třeba obrázek, který nahraje uživatel a já nevím, jak široký obrázek tam nahraje. |
||
Gappa Profil |
#6 · Zasláno: 25. 5. 2017, 06:47:39
Co takto? Živá ukázka
Má to své neduhy (pořadí v HTML, overflow), ale občas se to hodí :) |
||
Tomáš123 Profil |
#7 · Zasláno: 25. 5. 2017, 09:41:16
Keeehi:
Asi jedine tabuľkovými hodnotami vlastnosti display . Nepoznám iné riešenie, ktoré dokáže roztiahnuť stĺpce pomerne k množstvu, resp. šírke obsahu.
|
||
weroro Profil |
Napadá ma iba takéto riešenie Živá ukázka
|
||
Kcko Profil |
Keeehi:
Tabulkové hodnoty Živá ukázka Případně se podívej jak je udělaný "Blog Search" blackrockdigital.github.io/startbootstrap-blog-post |
||
Časová prodleva: 7 let
|
0