| Autor | Zpráva | ||
|---|---|---|---|
| T-fon Profil |
#1 · Zasláno: 17. 2. 2016, 21:37:32
Ahoj, poprosil bych o radu jak nastylovat zelený div, aby byl v jakoliv širokém okně vždy přilepený na spodní okraj žlutého divu, který bude stejně dlouhý jako modrý.
Použil jsem i jiné finty na stejnou výšku sloupců, např. JS, ale stále se nedaří. Viz. Živá ukázka |
||
| T-fon Profil |
Tady je ukázka použití JS, pak to funguje s absolutní pozicí. Nemůžu to ale použít, protože ve skutečnosti budu mít místo zeleného divu obrázek a u něj pak nefunguje bootstrap třída img-responsive.
|
||
| scheras Profil |
#3 · Zasláno: 18. 2. 2016, 09:09:08
Třeba takhle?
|
||
| T-fon Profil |
#4 · Zasláno: 18. 2. 2016, 09:38:21
To ne... Ten zelenej div (obrázek) musí být v pravém sloupci.
|
||
| Tomáš123 Profil |
#5 · Zasláno: 18. 2. 2016, 10:25:00
|
||
| T-fon Profil |
#6 · Zasláno: 18. 2. 2016, 10:41:58
OK, díky moc. Akorát teď koukám, že řešení s JS neni nejštastnější, protože na mobilu chci mít obrázek hned pod červeným divem, ale takhle tam bude vždy ta výška levého divu.
Ale to by se asi dalo vyřešit podmínkou. Pokud tedy není nějaké elegantnější řešení, než JS... |
||
| Tomáš123 Profil |
#7 · Zasláno: 18. 2. 2016, 10:54:45
T-fon:
Sloupce stejně vysoké „Pokud tedy není nějaké elegantnější řešení, než JS...“ @media screen and (max-width: ...) {height: auto !important}.
|
||
| T-fon Profil |
Já jsem ty metody stejně vysokých sloupců samozřejmě čet, v tom problém neni, mám problém to zkombinovat se zarovnáním.
Pokud to má být takto: @media (max-width: 767px) {
height: auto !important;
}Tak se nic nezmění, pokud to přiřadím sloupci .right, překryje se obrázkem červený div. |
||
| Tomáš123 Profil |
T-fon:
Pardón, keď som to napísal do riadku, nevšimol som si, že tam chýba selektor. Pomôže pridať toto: @media screen and (max-width: 767px) {
.right {
height: auto !important;
}
.right-bottom {
position: static;
}
}Čo sa týka JavaScriptového riešenia rovnako vysokých stĺpcov, hodnotu je potrebné dosadiť za min-height (a zmeniť to aj v @media deklarácii). S fixnou výškou, hoci dopočítanou, za rozpadá layout (výška obsahu sa zmení aj pri zmene veľkosti písma, či šírky zobrazovacej plochy).
|
||
| T-fon Profil |
#10 · Zasláno: 18. 2. 2016, 11:31:23
Super, teď to funguje perfektně, díky moc!
|
||
| Tomáš123 Profil |
#11 · Zasláno: 18. 2. 2016, 11:49:39
T-fon:
Ešte to nefunguje. Buď sa rozpadá layout kvôli fixnej výške alebo nie sú stĺpce rovnako vysoké. Niečo som skúsil a už viem, prečo nepoužívam Bootstrap :-). |
||
|
Časová prodleva: 8 let
|
|||
0