Obtékání DIVů ve třech sloupcích s fixní šířkou a automatickou výškou – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Obtékání DIVů ve třech sloupcích s fixní šířkou a automatickou výškou – CSS – Fórum – Programujte.comObtékání DIVů ve třech sloupcích s fixní šířkou a automatickou výškou – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
JohnyCSS
~ Anonymní uživatel
1 příspěvek
24. 12. 2014   #1
-
0
-

Ahoj, chtěl bych Vás požádat o pomoc :)

Momentálně vytvářím jednoduchý web pro prezentaci svých fotek (zatím na localhostu). Layout stránky mám hotový (header, content, footer).

Do content jsem cyklem vypsal všechny alba (náhled, název alba, datum), a to tak že pro každé album sem vytvořil <div class="album">náhled, název alba, datum</div>.

Problém je v tom, že nevím jak správně napozicovat DIVy-alba od druhého řádku. div.album má automatickou výšku - pro případ, že fotka bude na výšku. Šířku a okraje má pevné.

Problém v příkladu:

Když bude první a třetí album (na prvním řádku) na výšku např. 380px a druhé album mezi nimi bude na šířku - výška např. 200px, vytvoří se pod druhým-prostředním albem mezera mezi prvním a třetím albem těch 180px. Jde o to, že když použiju uvedený kód, druhý řádek se zobrazí špatně. Dejme tomu, že alba na druhém řádku budou všechny na šířku (šířka pevných 300px + okraje a výška 200px). Chtěl bych aby se první a třetí album ve druhém řádku zobrazily těsně (s okrajem 10px) pod prvním a třetím albem prvního řádku a druhé album ve druhém řádku "zasáhlo" do prvního řádku těsně pod druhé album v prvním řádku (s okrajem 10px).

Jednoduše řečeno, chci aby každé album (tzn. album na šířku i na výšku) mělo pevnou šířku 300px, pevný krajní a spodní okraj - tzn. byly těsně na sobě s uvedeným okrajem.

Příklad na obrázku:

  • červená = boční okraje 15px
  • modrá = spodní okraje 10px
  • zelená = divy-alba s pevnou šířkou 300px a automatickou výškou

Připojen obrázek.

 

<div id="content">
	<div class="album">
		zde je obrázek, název alba a datum
	</div>
	<div class="album">
		zde je obrázek, název alba a datum
	</div>
	<div class="album">
		zde je obrázek, název alba a datum
	</div>
	<div class="album">
		zde je obrázek, název alba a datum
	</div>
</div>

div#content{
	width: 960px;
}

div.album{
	width: 300px;
	height: auto;
	float: left;
	margin-left: 15px;
        margin-bottom: 10px;
}
Nahlásit jako SPAM
IP: 91.109.34.–
Reklama
Reklama
peter
~ Anonymní uživatel
2538 příspěvků
5. 1. 2015   #2
-
0
-

Asi nejlepsi mi vychazi takove to jako flexbox. Ale to se nejspis dopocitava javascriptem. Normalne si napocitas vysku, sirku v danem sloupci a rozpocitas mezi obrazky. Myslim si, ze css3 to zatim nema. a ten float mas spatne, ten se ti pri ruznych prilezitostech nejspis rozsype :)


tabulka?
http://www.jakpsatweb.cz/…tabulky.html#…

css3?
google = html5 gallery photo
http://www.htmlgoodies.com/…gallery.html#…
http://alpatriott.ru/works/album/
http://alpatriott.ru/…bum-mod.html

css3 flex images
http://www.smashingmagazine.com/…ith-flexbox/
http://codepen.io/…as/pen/Aksni

javascript?
google = javascript gallery
http://www.twospy.com/…query-plugin

google = javascript gallery Spectacular
http://www.simpleviewer.net/products/
http://www.simpleviewer.net/…ples/modern/

http://www.jqueryrain.com/example/jquery-gallery/
http://www.jqueryrain.com/?…
google = javascript flex Images simple example

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:9468:4f...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 17 hostů

Podobná vlákna

Dva <div> z toho jeden fixní — založil lavka3

Obtékání — založil Paja2

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý