FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Filip Janecek
Člen
Avatar
Filip Janecek:9.10.2018 17:15

Ahoj,
určitě existuje nějaké jednoduché řešení, nebo prostě přehlížím jasnou chybu, nicméně se mi stává, že první sloupec bývá posunut o jeden řádek. Tak jsem se vynasnažill udělat zjednodušený příklad :D :

<!DOCTYPE>
<html>
  <head>
  </head>
  <body>
       <div class="uvodnik">
  <h5>Odstavec 1</h5>
  <p>dfhjgsdjkvgr yhjfhd gd vg  dfyxv hjsdfvjservjgfdvhjgse  rhghvfdvghdgvfxdh  yjgvhjxb gdhrv gxdhbv ghjdgrvzug df</p>
  <h5>Odstavec 2 </h5>
  <p>ghu hregf gfruergfuidf guerhzgui reugz urigzvufrvud ugrfzgf rugzdfu uivgz urgzdfug df vgu gu</p>
  <h5>Odstavec 3 </h5>
  <p>sdgfhgdhygfshgfysgvfd vzudvg duszyvzudv zds vzdgsv sdyzygz vczdsgv dzdgyvfz dgv zdvgds vzdgvc zuvgxzv dxgv xczvg xcvzxcg </p>
</div>
  <style> .uvodnik {
   margin-right:200px;
   margin-left:200px;
   margin-top: 150px;
   display: inline-block;
   column-count: 3;
   column-rule: 3px solid rgb(47, 48, 62);
   column-gap: 40px;
  }
 </style>
  </body>
</html>

Zkusil jsem: Pokusil jsem se zakonponovat <ol> jako to bylo řeščeno na StackOverflow (https://stackoverflow.com/…ther-columns):

ol {
    margin-top: 0px;
}

Chci docílit: Potřeboval bych, aby všechny odstavce začínaly na stejné úrovni.

 
Odpovědět
9.10.2018 17:15
Avatar
Jiří Havelka
Člen
Avatar
Jiří Havelka:9.10.2018 17:50

Nejsem žádný velký odborník na css, ale já bych zkusil toto.

h5 {
    margin-top: 0px;
}
Editováno
 
Nahoru Odpovědět
9.10.2018 17:50
Avatar
Šimon Raichl
Tvůrce
Avatar
Odpovídá na Filip Janecek
Šimon Raichl:9.10.2018 22:28

Bud jak rika Jiří Havelka, ale je celkove dobry na zacatku vynulovat vsechny marginy a paddingy, ktery jsou by default a nastavit si pak vlastni hodnoty

*{
        padding: 0;
        margin: 0;
}

Btw sice nevim, co se snazis presne udelat, ale to co ty delas by slo udelat pres flexbox, tady prikladam narychlo udelanej priklad:

<!DOCTYPE>
<html>
  <head>
  </head>
  <body>
       <div class="uvodnik">
  <div>
    <h5>Odstavec 1</h5>
    <p>dfhjgsdjkvgr yhjfhd gd vg  dfyxv hjsdfvjservjgfdvhjgse  rhghvfdvghdgvfxdh  yjgvhjxb gdhrv gxdhbv ghjdgrvzug df</p>
  </div>
  <div>
    <h5>Odstavec 2 </h5>
    <p>ghu hregf gfruergfuidf guerhzgui reugz urigzvufrvud ugrfzgf rugzdfu uivgz urgzdfug df vgu gu</p>
  </div>
  <div>
    <h5>Odstavec 3 </h5>
    <p>sdgfhgdhygfshgfysgvfd vzudvg duszyvzudv zds vzdgsv sdyzygz vczdsgv dzdgyvfz dgv zdvgds vzdgvc zuvgxzv dxgv xczvg xcvzxcg </p>
  </div>
</div>
  <style>
  *{
        padding: 0;
        margin: 0;
  }
  .uvodnik {
        display: flex;
  }
  .uvodnik div{
        border-right: 3px solid rgb(47, 48, 62);
  }
  .uvodnik div *{
        margin: 1.5rem;
  }
  .uvodnik div:last-child{
        border-right: none;
  }
 </style>
  </body>
</html>
 
Nahoru Odpovědět
9.10.2018 22:28
Avatar
Filip Janecek
Člen
Avatar
Odpovídá na Jiří Havelka
Filip Janecek:10.10.2018 16:20

Děkuji moc, pokud jde pouze o tento problém, pak je nejrychlejší řešení :

h5 {
    margin-top: 0px;
}

Pokud je zájem o rozsáhlejší změny, bude asi lépe fungovat skript Šimona Reichla. Děkuji všem!

 
Nahoru Odpovědět
10.10.2018 16:20
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 4 zpráv z 4.