Diskuze: První sloupec je řádek níže

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Absolvováno

Označit lekci jako neabsolvovanou

Pokračovat ve výuce

Jak se ti líbí článek?

Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500

Jak se ti kurz líbí?

Tvé hodnocení kurzuZnaků 0 z 50-500

Aktivity

Filip Janecek

Člen

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 :

<!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

Jiří Havelka

Člen

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 9.10.2018 17:51

Nahoru Odpovědět

9.10.2018 17:50

Šimon Raichl

Tvůrce

Š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

Filip Janecek

Člen

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.

Nejčastěji vyhledáváné

Diskuze: První sloupec je řádek níže