
CSS rozvržení - problém s Float
Zdarec, mám problém s CSS konkrétně s vlastností float. Chci vytvořit 2 sloupce obrázků, budou různě vysoké a naukládané v divech s třídou. Nejednoduší je to napráskat do tabulky. Ale já bych potřeboval aby se to "srovnávalo" tj. sloupce budou přibližně stejně vysoké.
Už jsem to zkoušel nedopadlo to nejlíp.
Kod:
<div id="obsah">
<div class="obr"><img src="atd...></div>
....
</div>
[b]styl:[/b]
<style>
#obsah{
background-color:yellow;
width:500px;
height:auto;
}
.obr{
width:47%;
clear:right;
float:left;
margin:2px;
</style>
Přibližný nákres:
špatně (mezery mezi obrázky) :
IIIIIIII IIIIIIIII
IIIIIIIII
IIIIIIIII
IIIIIIII IIIIIIIII
Mělo by to vypadat jako jeden celý obrázek akorát s 4px mezerami, pátrám po tom celou dobu doufám že mě pochopíte, Díky
Ak som správne pochopil, dva obrázky sú širšie a teda vznikne napravo medzera, nie?
Skoro, mezera tam vznikne ale kvůli výšce obrázku.
Počuj, aj tak si to neviem predstaviť, skús hodiť screenshot a zdroják.
A asi je tu jedna možnosť ešte, skúsim to nájsť v jednom zdrojáku.
Takže to čo som si myslel bolo niečo iné.
Dávaj po každom druhom obrázku clear: both, čiže:
<br style="clear: both;" />
Predpokladám, že ti išlo o toto, keď tak nad tým rozmýšľam.
Výsledný efekt bude takýto:
Takhle jsem to namaloval:
[img]beznzvuv.png[/img]
červené je jak se to chová s float, zelené jak by se to mělo chovat.:)
Ahoj,
hoď to do dvou obalových divů.
S tím, že tomu levému dáš float: left;
V případě nutnosti tomu pravému dej float: right; a nastav absolutní velikost nadřazenému divu, aby to nelétalo všude možně :)
Doufám, že jsem to správně pochopil :)
EDIT:
Nač je v tříde obr ten width?
Takto?
float-obr