| Autor | Zpráva | ||
|---|---|---|---|
| Member of Stackland Profil * |
#1 · Zasláno: 25. 11. 2013, 10:56:28
Ahoj, mám na stránce tři divy. Rád bych je měl v "jednom" řádku, první zarovnaný doleva, druhý doprostřed, třetí doprava. Předpokládejme, že všechny tři budou mít pevnou šířku, např.:
divvpravo{width:150px;}
divuprostred{width:800px;}
divvpravo{width:150px;}Nehledě na rozlišení uživatele by měly být vždy zarovnány stejně. |divvpravo| divuprostred |divvlevo| V CSS jsem nováček, na stránce mám zatím pouze toto: /* CSS */ #body{height:auto;width:auto;border:1px dashed black;}
#body_left{height:400px;width:100px;border:1px dashed red;float:left}
#body_middle{margin:auto;height:400px;width:1000px;border:1px dashed red;clear:right;}
#body_right{height:400px;width:100px;border:1px dashed red;float:right;}/* HTML */ <div id="body">
<div id="body_left"></div>
<div id="body_middle"></div>
<div id="body_right"></div>
</div>Když v HTML vykreslím nejdříve div right a potom middle, pak se to zobrazí tak, jak požaduji. Ale řešení mi nepřijde správné, vy to tak řešíte? |
||
| Str4wberry Profil |
#2 · Zasláno: 25. 11. 2013, 10:59:17
Vlastnost
float můžete přidat i pro #body_middle.
|
||
| Member of Stackland Profil * |
#3 · Zasláno: 25. 11. 2013, 11:04:16
Potom se ale ztratí zarovnání divu
divuprostred na prostředek, a zarovná se doprava, jak jsme mu přikázali.
To, že se jako neplovoucí div divuprostred zarovná na prostředek, mám zařízené jen u tohoto divu pomocí marging: auto (možná je to blbina a v praxi se to řeší jinak, poraďte)
|
||
| Str4wberry Profil |
#4 · Zasláno: 25. 11. 2013, 13:03:07
Já to řešívám jedním z těchto způsobů: Třísloupcový layout
|
||
| jefitto44 Profil |
#5 · Zasláno: 25. 11. 2013, 15:11:08
Problém je v tom, že treba nastaviť relatívnu šírku divov...
Napríklad body_left necháš 150 px, body_right necháš 150 px a stred dáš width:100%; |
||
| Member of Stackland Profil * |
#6 · Zasláno: 26. 11. 2013, 18:39:26
Děkuji za odpověď Str4wberry. Pokud to udělám tak, jak mi radíš:
#body_left{height:400px;width:100px;background-color:blue;float:left;}
#body_center{height:400px;width:100%;background-color:red;border:3px solid black;}
#body_right{height:400px;width:200px;background-color:green;float:right;}body_left zarovná doleva, prostřední div body_center se roztáhne přes celou stránku od leva do prava a to doslova, tedy i přes (nebo spíše pod) div body_left, přitom levý div zůstane navrchu a prostřední je jakoby pod ním.
Pravý div div_right se zarovná doprava, ale je pod nimi, není v "jednom řádku".
To mé řešení, které jsem popsal nahoře, kdy jen prohodím pořadí v HTML kódu, jak budu divy vypisovat (levý (zarovná se doleva), pravý (zarovná se doprava) a teprve naposled prostřední (vsadí se mezi ně) mi přijde špatně, ale funguje. Zmíněný kód přesně koresponduje s tím, co mám na stránkách. Nevíte mi někdo poradit? |
||
| Member of Stackland Profil * |
#7 · Zasláno: 27. 11. 2013, 08:19:16
Našel jsem na http://stackoverflow.com/questions/18428106/html-3-columns-header, tak se s vámi o něj chci podělit.
Díky za rady. |
||
|
Časová prodleva: 10 let
|
|||
0