Vánoční nadílka Vánoční nadílka
Až 80% zdarma! Předvánoční BLACK FRIDAY akce. Více informací
Avatar
Filip Janecek:9. října 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. října 17:15
Avatar
Jiří Havelka:9. října 17:50

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

h5 {
    margin-top: 0px;
}
Editováno 9. října 17:51
 
Nahoru Odpovědět 9. října 17:50
Avatar
Šimon Raichl
Redaktor
Avatar
Odpovídá na Filip Janecek
Šimon Raichl:9. října 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. října 22:28
Avatar
Odpovídá na Jiří Havelka
Filip Janecek:10. října 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. října 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.