Řazení bloků (elementů) vedle sebe na webu - HTML
Dobrý den.
Prosím, bádám na tomto už několikátý den a dochází mi trpělivost, i času jsem zbytečně ztratil mnoho a stejně mi to nefunguje a už mě to, upřímně, přestalo i bavit a jsem bezradný...
Potřebuji jednotlivé <div> bloky na webové stránce řadit vedle sebe tak, aby se automaticky řadily za sebou a až na ně na stránce nezbyde místo, aby se automaticky začaly řadit na další řádek a tak dále až do posledního bloku.
Nyní se mi bohužel zobrazují pod sebou, což je velmi nepraktické a nepřehledné, protože zbytečně je pak vše roztahlé na velmi dlouhou stránku a je nutné zbytečné rolování.
Nevíte, prosím, jak jednotlivé celé bloky, kdy jeden blok obsahuje Nadpis, pod ním malý obrázek a pod ním tlačítko pro stažení PDF souboru, se řadily vedle sebe?
Přidávám screen a příklad:
Je například nadpis Návod pro vysavač Kobold VK7, pod ním je miniatura (obrázek) a pod ním požadované tlačítko pro stažení návodu. CHci, aby další následující blok opět s nadpisem, obrázkem a tlačítkem pro stažení se řadil vedle toho předchozího a tak dále .....
Jak bude vypadat ono použití HTML kódu pro řazení vedle sebe, prosím?
Přidávám kromě screenu i HTML kód tří bloků pro představu a moc prosím o konkrétně uvedený příklad na mých přidaných HTML kódech, jak by to mělo asi vypadat? Moc děkuji
</div><div class="mt-4 keditable">
Návod k použití pro vysavač a úklidový systém Kobold VK7:
</div><div class="mt-2 mb-2 kimgRatio"><img title="Návod pro vysavač Kobold VK7 od Vorwerku" alt="Návod pro vysavač Kobold VK7 od Vorwerku" class="img-fluid" src="data/files/navody-ke-stazeni/vk7manual-sm.png" align="left"></div><div class="koButtons d-flex pb-4"><a class="btn btn-color1" href="data/files/navody-ke-stazeni/koboldvk7-navodkpouziti-vorwerk.pdf">Návod k použití - Kobold VK7</a>
</div><div class="mt-4 keditable">
Návod k použití pro vysavač a úklidový systém Kobold VB100:
</div><div class="kimgRatio mt-2 mb-2"><img class="img-fluid" alt="" title="" src="data/files/navody-ke-stazeni/koboldvb100-manualsm.jpg" align="left"></div><div class="koButtons d-flex pb-4"><a class="btn btn-color1" href="data/files/navody-ke-stazeni/koboldvb100-navodkpouziti-vorwerk.pdf">Návod k použití - Kobold VB100</a>
</div><div class="mt-4 keditable">
Návod k použití pro vysavač a úklidový systém Kobold VK200:
</div><div class="kimgRatio mt-2 mb-2"><img title="" alt="" class="img-fluid" src="data/files/navody-ke-stazeni/koboldvk200manual-sm.png" align="left"></div><div class="koButtons d-flex pb-4"><a class="btn btn-color1" href="data/files/navody-ke-stazeni/koboldvk200-navodkpouziti-vorwerk.pdf">Návod k použití - Kobold VK200</a>
.......................... (atd)
Nastavit těm DIVům přes CSS vlastnost float:left nefunguje?
Zdravím.
I to jsem zkoušel, otázkou je, zda jsem onen Float:left použil správně... Teoreticky stačí někde vynechat jeden výraz na počátku i konci, který uzavírá celý výraz a možná proto to nefungovalo.
Jak by to, prosím, v mém případě s použitím Float:left mělo fungovat? Mohli byste mi, prosím, ukázat konkrétní příklad na mnou zmíněné HTML kódy? Zkusím to na základě Vašeho snad správného tvaru a použití vyzkoušet a aplikovat...
Moc díky.
Když třeba použiji např. <div style="float: left"> ať již před nebo za celým blokem, stejně se posune vždy jen daný výraz (text, obrázek či tlačítko) před či za tímto výrazem. Tzn. neposune se onen celý složený blok, ale jen text.
Tak nevím, zda to dělám správně.
Jenže já potřebuji, aby se za tímto blokem:
</div><div class="mt-4 keditable">
Návod k použití pro vysavač a úklidový systém Kobold VK7:
</div><div class="mt-2 mb-2 kimgRatio"><img title="Návod pro vysavač Kobold VK7 od Vorwerku" alt="Návod pro vysavač Kobold VK7 od Vorwerku" class="img-fluid" src="data/files/navody-ke-stazeni/vk7manual-sm.png" align="left"></div><div class="koButtons d-flex pb-4"><a class="btn btn-color1" href="data/files/navody-ke-stazeni/koboldvk7-navodkpouziti-vorwerk.pdf">Návod k použití - Kobold VK7</a>
zařadil tento celý blok hned vedle něho (za ním):
</div><div class="mt-4 keditable">
Návod k použití pro vysavač a úklidový systém Kobold VB100:
</div><div class="kimgRatio mt-2 mb-2"><img class="img-fluid" alt="" title="" src="data/files/navody-ke-stazeni/koboldvb100-manualsm.jpg" align="left"></div><div class="koButtons d-flex pb-4"><a class="btn btn-color1" href="data/files/navody-ke-stazeni/koboldvb100-navodkpouziti-vorwerk.pdf">Návod k použití - Kobold VB100</a>
a tak dále každý za každým, tedy zkrátka aby "pluly" po stránce a až na ně nevyjde místo, aby se automaticky zase řadily na dalších řádcích další bloky. Nevím jak jinak to vysvětlit. Snad je to srozumitelné. Dále viz screen.
Jak to tedy bude vypadat, prosím? Moc díky
Celý ten jeden blok zabal do divu a tomu to nastav.
V kódu v class máš mimojiné uveden flex (nejspíš z bootstrapu).
Tak zkus pochopit co flex (display flex) je a co to dělá a nauč se flex používat.
Osobně bych to řešil přes display flex.
Mrkni se sem, zda ti bude vyhovovat řešení s nadpisem The flex-wrap Property: https://www.w3schools.com/css/css3_flexbox_container.asp
To už jsem mu psal před dvěma dny