Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailem Ř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)

Jsou zobrazeny jen nové odpovědi. Zobrazit všechny
Předmět Autor Datum
Mrkni se sem, zda ti bude vyhovovat řešení s nadpisem The flex-wrap Property: https://www.w3schools.…
Pavel 13.07.2023 12:53
Pavel
To už jsem mu psal před dvěma dny :-) poslední
kacikac 13.07.2023 16:57
kacikac

Zpět do poradny Odpovědět na původní otázku Nahoru