Diskuze: Float - dá se to i jiným způsobem?

Aleš Fiala

Člen

Aleš Fiala:4.6.2020 22:08

Já si nevím s tímhle trochu rady zda to mám dobře, ale zajímá mě, zda to samé jde s overflow: hidden a s flow: left, right. Šlo by to bez nutnosti margin-bottom a možná i bez clear? Díky!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  <title>Střední odborné školy</title>
  <style>
  div {
  margin: 100px;
  }
  .vlevo1 {
  float: left;
  }
  .vlevo2 {
  float: left;
  }
  .chorvatsko {
  clear: right;
  }
  .vpravo1 {
  float: right;
  margin-bottom: 10px;
  }
  .vpravo2 {
  float: right;
  }
  </style>
  </head>
  <body>
    <div>
      <h1 style="text-transform: uppercase;">Střední odborné školy</h1>
      <p class="vlevo1">Střední odborná škola Interdact, s.r.o.</p>
      <img class="vpravo1" src="Škola.jpeg" alt="Škola" width=200; height="200;">
      <hr class="chorvatsko">
      <p class="vpravo2">Střední odborná škola Interdact, s.r.o.</p>
      <img class="vlevo2" src="Škola.jpeg" alt="Škola" width=200; height=200;>
    </div>
  </body>
</html>

Zkusil jsem: Zkoušel jsem už s margin-bottom, pak ještě použít i clear a float, nakonec jsem tam přidal i overflow, ale jinak jsem se k tomu už nedopracoval

Chci docílit: Snažím se dosáhnout bez nutnosti použití u horního obrázku margin-bottom

Odpovědět

4.6.2020 22:08

Milan Turyna

Tvůrce

Milan Turyna:5.6.2020 6:12

Tak zaprvé si odstraň zbytečné styly, když tam máš dvakrát left (vlevo1,2) proč to nepojmenuješ vlevo a nepoužiješ to?

Jinak nevím moc o čem mluvíš, overflow dělá to že ti skryje scrollbar, tak nevím jak to s tím souvisí.

Nebylo by lepší použít třeba bootstrap na grid a jen styly si udělat své?

Nahoru Odpovědět

5.6.2020 6:12

Řeš pouze to, co dokážeš ovlivnit.

Peter Mlich

Člen

Peter Mlich:5.6.2020 8:51

Viz Milan Turyna, pokud delas webove stranky skoly, vyuzij bootstrap css style, https://getbootstrap.com/.

overflow: hidden - slouzi k orezani obsahu, ktery vytece pres okraje
float: left, right - slouzi k obtekani objektu pouziva se to treba k obtekani textu kolem obrazku, u clanku

Z tveho popisu neni uplne jasne, ceho chces dosahnout? Mas nekde treba obrazek, tohle mi to dela a takto bych to chtel?

Mozna se pokousis dosahnout toho, aby byl obrazek soucasti odstavce. Tak ho musis dat dovnitr

<p> text <img style="floaf:left"> </p>
<p> <img style="floaf:left"> text </p>
<p> text <img style="floaf:right"> </p>
<p> <img style="floaf:right"> text </p>
<div style="clear:both"></div> // clear se dava az na konec, pokud se ti nespravne zobrazuje dalsi obsah (ve starsich prohlizecich) nebo se tam nedava vubec.

A nebo se to jeste pise takto

<p> text <img style="floaf:left"> <div style="clear:both"></div> </p>
<p> <img style="floaf:left"> text <div style="clear:both"></div> </p>
<p> text <img style="floaf:right"> <div style="clear:both"></div> </p>
<p> <img style="floaf:right"> text <div style="clear:both"></div> </p>

A nebo se pouzije css zapis

p:after {content:""; clear:both;}

Nahoru Odpovědět

5.6.2020 8:51

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 3 zpráv z 3.