Autor Zpráva
DeadMan
Profil
Je to hodně pitomý dotaz, ale já už se s tím trápím přes 2 hodiny. Jak mohu udělat dva DIVy vedle sebe, ale aby byli zarovnány na střed.
Měsíček
Profil
float, margin ...
lordfrikk
Profil
^ Výborná rada!
DeadMan
Profil
Ta moje pitomá hlava to nepobrala. Nějak se s tím peru a stejně to nejde. Potřeboval bych příklad. Dva DIVy, které budou vedle sebe a zarovnány na prostředek. Děkuji.
Str4wberry
Profil
Takže si najdeš návod pro centrování stránky, dovnitř centrovaného obsahu vložíš <div>y s float a width.
jxj
Profil *
Moc tomu nerozumím ale snad to tak je: Pro ty dva divy nastavíš pravidlo float: left
A pokud jej chceš zarovnat na střed tak oba divy obal do dalšího divu a tomu nastavíš margin: auto, potom pro body text-align: center a ještě pro ten obalový div nastaviš text-align: left to pro blbé prohlížeče.

asi takto

html:

<body>
  <div id="obal">

      <div id="prvni">
      </div>

      <div id="druhy">
      </div>
  </div>

</body>


css:

body {text-align: center; }
div#obal {width: 600px; text-align: left; margin: auto}
div#prvni {width: 300px; float: left; }
div#druhy {width: 300px; float: left; }
jxj
Profil *
byly jste rychlejší :D Je ten muj kod aspoň správně?
Str4wberry
Profil
Reakce na jxj:
Je ten muj kod aspoň správně?
Snad ano, ale byl-li by Explorer ve standardním režimu, šlo by vynechat část pro blbé prohlížeče. Měla by to teď DeadMana pochopit.
Měsíček
Profil
Reaguji na jxj:

Myslím, že by to mělo býti takhle:

div#obal {width: 600px; text-align: left; margin: 0px auto;}

Reaguji na lordfrikka:

"^ Výborná rada!"

Díky, copak se ti na ni nezdá?
jxj
Profil *
Měsíček: moc díky to jsem nevěděl :D
Str4wberry: aha no ja o tom četl tak to tam dávám pořád.
jxj
Profil *
EDIT: Měsíček: jo vlastně aha spletl jsem se to by mi pak vlastně nastavilo i margin: auto z vrchu a zespodu což ani myslím nejde. :D
DeadMan
Profil
jxj
Díky ti moc. Problém si vyřešil.
roboter
Profil *
Dobrý den,
použil jsem váš návod na pozicování dvou DIVů vedle sebe pomocí CSS vlastnosti float a třetího obalového DIVu, ale bohužel nefunguje. V obalovém DIVu nelze umístit dva vnořené divy na prostředek. Bohužel v jiných vláknech všichni radí analogicky.
Děkuji za radu.
juriad
Profil
roboter:
Co znamená na prostředek? Ten postup v [#6] je již trochu zastaralý. Lze to dělat moderněji, viz Obtékání v CSS » Jednoduchý floatovaný layout.
roboter
Profil *
Měl jsem na mysli text-align:center nebo zastaralý html tag <center>... Zkusím mrknout na ten odkaz a vyzkouším... zatím moc děkuji.
anonymníí
Profil *
roboter:
Tag <center> nikde nevidím. Ten zastaralý je, ano.

Jinak ukázka z #6 funguje stále dobře, jen je možno vynechat deklaraci text-align na 1. a 2. řádku. Zbytek je stále platný a stejný postup je de facto uveden v odkazu v #14. Je možné vnitřní prvky floatovat oba vlevo (#6), nebo jeden vlevo, druhý vpravo (#14).
roboter
Profil *
Já vážně nevím.
Potřebuji ty dva letopočty dát vedle sebe, což se daří, ale nevím, proč ten první tácek začíná napravo od nich: http://www.tacky.kvalitne.cz/pivovar/blatna-blatenske-pivo/


(respektive ve Firefoxu... Chrome to zobrazuje správně, ale oba letopočty jsou vlevo, chtěl bych je uprostřed... Asi dělám nějakou hloupou chybu, ale fakt nevím...)
juriad
Profil
roboter:
Protože něco co plave nejde takto jednoduše vystředit.
Zruš třídě .rok vlastnost float a nastav mu display: inline-block;
A víš, že při zvětšení písma se ti to rozsype a text nebude lícovat k rámečkům nastaveným jako pozadí?
roboter
Profil *
juriad:
Děkuji za radu, už to funguje. No, vidíš, to s velikostí písma mě ani nenapadlo... Možná to nakonec udělám úplně jinak. Forma bude muset ustoupit do pozadí... Děkuji ještě jednou.
grfgrf
Profil
<div class="obal">
  <div class="obsah"></div>
  <div class="obsah"></div>
</div>

.obal {
  display: flex;
  width: 768px;
  margin: 0 auto;
}
.obsah {
  flex: 1;
}

bonus: obsahy budú mať aj rovnakú výšku + keby si sa rozhodol že chceš mať 3 alebo viacej DIVov vedla seba rovnakej šírky, stačí pridať ďalší div class obsah a nemusis meniť css :))

EDIT:
support:
http://caniuse.com/#search=flex support 95% global
fallback pre starsie browseri:
http://designkarma.co.uk/blog/using-flexbox-now
Chamurappi
Profil
Reaguji na grfgrfa:
A nebo použije table a má lepší bonus v podobě výrazně lepší podpory v prohlížečích. V čem je flex lepší?
Mimochodem, odpovídáš komu? Je celkem jisté, že DeadMan flex použít nemohl.

support 95% global
Zbytečně málo.
grfgrf
Profil
Chamurappi máš pravdu že v tomto prípade je rovnako jednoduché a s lepšou podporou použiť display table.
A reagujem na hocikoho kto bude mat podobný problém, napr sa sem niekto za rok-dva dostane cez vyhladávanie a flex už bude štandart :D

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: