Autor Zpráva
tesik
Profil *
Ahoj,

mám boxy o různé výšce, některé chci zarovnat vlevo, jiné vpravo. Nemůžu mít sloupce obalené žádným kontejnerem. Problém je s bílým ( v mém příkladu černým :-) ) místem, které samozřejmě vzniká při standardním chování floatu. CSS bude v tomto případě zřejmě krátké. Našel jsem jQuery řešení masonry.desandro.com, které mi bohužel nepomůže, jelikož neřeší fakt, zda jsou sloupce floatující vlevo či vpravo. Víte o něčem, co by mi pomohlo vyřešit tento problém?

Příklad:
<html>
<head>
  <style>
    .container { width: 200px; background: black; overflow: hidden; }
    .box { width: 100px; float: left; clear: left; }
    .red { height: 100px; background: red; }
    .green { height: 150px; background: green; }
    .blue { height: 50px; background: blue; float: right; clear: right; }
    .yellow { height: 30px; background: yellow; }
    .orange { height: 160px; background: orange; float: right; clear: right; }
  </style>
</head>
<body>
  <div class="container">  
    <div class="red box"></div>
    <div class="green box"></div>
    <div class="blue box"></div>
    <div class="orange box"></div>
    <div class="yellow box"></div>
  </div>
</body>
</html>
Petr ZZZ
Profil
Stejná výška sloupců ve skutečnosti různě vysokých se dá řešit společným obrázkem na pozadí. (Bez bloku nadřazeného/společného oběma sloupcům to asi udělat nepůjde.)
tesik
Profil *
Tohle řešení bohužel můj problém neřeší, tak se white-space nezbavím. :-) Zapeklitá situace...
Davex
Profil
Moc jsem nepochopil, proč vadí černé místo u různě vysokých boxů a jak by to mělo vypadat. Ty černé tam nemají být?

Pokud mají být pravé bloky posunuté nahoru a je známa výška prvního bloku vlevo, tak bych je asi posunul záporným margin-top.
tesik
Profil *
Černá je barva pozadí containeru, aby bylo vidět "odskočení" floatovaných boxů. Jde o to, že chci mít boxy nalepené na sobě, bez mezer.

Tohle nepomůže, přidal jsem další boxíky, aby bylo vidět, že mezera může vzniknout kdekoliv. Viz. http://jsfiddle.net/W3STX/
joe
Profil
Se samostnými styly se černých mezer nezbavíš, pokud předem nevíš kde jaké bloky budou a jakou budou mít výšku (pak bys to mohl řešit mínusovým marginem).

Jinak by se to dalo řešit přes JavaScript.
tesik
Profil *
Nebylo zbytí a musel se použít jednoduchý scriptík. Kdyby měl někdo stejný problém, tak možné řešení: http://jsfiddle.net/VDd6L/

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: