Diskuze: section nespolupracuje s DIV

wolfsharp666

Člen

wolfsharp666:4.5.2016 22:07

Zdravím narazil jsem na problém dělám webové stránky a když se do tagu <section> snažím rozdělit 2 věci vedle sebe pomocí Divu tak tag section to bere jak bych do něho nic nevložil a neroztahuje se podle rozložení obsahu a rozhazuje celé formátování stránky a to hlavně na mobilu. Děkuji za jakoukoliv radu.

article section.clanek{
  position: relative;
    width: 100%;
    height: 50%;
    background: #ccc;
    margin-top: 7%;
 }

 div.pr1{
  position: relative;
  width: 45%;
  float: left;
  margin: 1%;
 }
 div.pr2{
  position: relative;
  width: 45%;
  float: right;
  margin: 1%;
 }
<article>
<section class="clanek">
    <h2>Cena a další design na vyžádání </h2>  <br>
        <div class="pr1"><a href="css/obraz/produkty/vnitrek.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek.jpg"></a></div>
        <div class="pr2"><a href="css/obraz/produkty/vnitrek2.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek2.jpg"></a></div>
        <div class="pr1"><a href="css/obraz/produkty/vnitrek3.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek3.jpg"></a></div>
        <div class="pr2"><a href="css/produkty/vnitrek4.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek4.jpg"></a></div>
        <div class="pr1"><a href="css/obraz/produkty/vnitrek5.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek5.jpg"></a></div>
        <div class="pr2"><a href="css/obraz/produkty/vnitrek6.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek6.jpg"></a></div>
        <div class="pr1"><a href="css/obraz/produkty/vnitrek7.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek7.jpg"></a></div>
        <div class="pr2"><a href="css/obraz/produkty/vnitrek8.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek8.jpg"></a></div>
        <div class="pr1"><a href="css/obraz/produkty/vnitrek9.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek9.jpg"></a></div>
        <div class="pr2"><a href="css/obraz/produkty/vnitrek10.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek10.jpg"></a></div>
        <div class="pr1"><a href="css/obraz/produkty/vnitrek11.jpg" data-lightbox="vnitrek"><img width="100%" src="css/obraz/produkty/vnitrek11.jpg"></a></div>

</section>
</article>

Odpovědět

4.5.2016 22:07

Tomáš123

Člen

Tomáš123:5.5.2016 13:25

Obtekané prvky sú vyňaté z toku dokumentu. Zabrániť sa tomu dá clearovaním. Viď http://www.jakpsatweb.cz/css/clear.html.

Nahoru Odpovědět

5.5.2016 13:25

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Libor Šimo (libcosenior)

Tvůrce

Libor Šimo (libcosenior):5.5.2016 14:02

Máš dobre nalinkovaný css súbor?
Mne to myslím kreslí dobre.

Nahoru Odpovědět

5.5.2016 14:02

Aj tisícmíľová cesta musí začať jednoduchým krokom.

Tomáš123

Člen

Tomáš123:5.5.2016 14:47

Rodič sa nerozťahuje aj kvôli obmedzeniu výšky. Prečnievajúci obsah sa správa podľa nastavenej hodnoty vlastnosti overflow (predvolene visible - obsah je viditeľný, vytečie z rodiča).

Bude teda potrebné odstrániť nastavenie výšky a pridať nejaký čistič (spomínaná vlastnosť clear).

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

5.5.2016 14:47

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

wolfsharp666

Člen

wolfsharp666:10.5.2016 12:25

Děkuji za pomoc

Nahoru Odpovědět

10.5.2016 12:25

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.