| Autor | Zpráva | ||
|---|---|---|---|
| tesik Profil * |
#1 · Zasláno: 25. 10. 2012, 14:12:26
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 |
#2 · Zasláno: 25. 10. 2012, 18:39:12
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 * |
#3 · Zasláno: 25. 10. 2012, 22:14:04
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 * |
#5 · Zasláno: 28. 10. 2012, 01:01:17
Č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/ |
||
|
Časová prodleva: 4 dny
|
|||
| joe Profil |
#6 · Zasláno: 31. 10. 2012, 21:44:23
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 * |
#7 · Zasláno: 1. 11. 2012, 17:19:59
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/
|
||
|
Časová prodleva: 13 let
|
|||
0