Die float-Eigenschaft und wie man sie einsetzt um Bilder von Text umfliessen zu lassen
Die float-Eigenschaft und wie man sie einsetzt um Bilder von Text umfliessen zu lassen

Die float-Eigenschaft und wie man sie einsetzt um Bilder von Text umfliessen zu lassen

Tutorial

Um auf die Eigenschaft float einzugehen bediene ich mich dem Basis-Website-Layout welches ich bereits im Artikel über flex-wrap genutzt habe.

Die Farben des Parent- sowie des Article-Containers werde ich abändern damit das Ergebnis insgesamt etwas besser aussieht. Kommen wir nun zum Aufbai des Codes.

Der HTML-Code

  <body>
    <div id="parent">
      <div id="child" class="header">Header</div>
      <div id="child" class="nav">Nav</div>
      <div id="child" class="article">
        <h1>Rookburgh</h1>
        <p><img src="../images/rookburgh.jpg" class="float"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
      </div>
      <div id="child" class="sidebar">Sidebar</div>
      <div id="child" class="footer">Footer</div>
    </div>
  </body>

Was hier wichtig ist:

  • Der Article-Container hat eine Überschrift und 2 Paragraphen mit Blindtext bekommen.
  • Im ersten Paragraph habe ich ein Bild mit Hilfe des img-Tags eingebaut.
  • Dem Bild habe ich die Klasse .float zugeteilt damit ich es im Stylesheet mit den gewünschten Deklarationen belegen kann.

Das Stylesheet

Hier nochmal der gesamte CSS-Code. Diesen werde ich hier nicht vollständig kommentieren sondern mich nur auf die wichtigen Aspekte beschränken die für das Thema dieses Beitrags wichtig sind.

Float: left;

      body {
        background-color: black;
      }
      #parent {
        max-width: 60%;
        background-color: lightcyan;
        margin: 20px auto;
        padding: 25px;
        display: flex;
        flex-wrap: wrap;
      }
      #child {
        padding: 10px;
      }
      .header {
        width: 100%;
        height: 100px;
        background-color: aqua;
      }
      .nav {
        width: 100%;
        height: 20px;
        color: white;
        background-color: blue;
      }
      .article {
        flex: 0 0 66%;
        min-height: 300px;
        background-color: white;
      }
      .float {
        width: 50%;
        height: auto;
        float: left;
        margin-right: 10px;
      }
      .sidebar {
        flex: 1 0 0;
        height: auto;
        background-color: deepskyblue;
      }
      .footer {
        width: 100%;
        height: 150px;
        color: white;
        background-color: darkblue;
      }
  • Die Klasse float bestimmt nun wie sich das Bild in den Text einfügt.
  • Die Deklaration float: left; bewirkt dass das Bild auf der linken Seite fixiert ist und der Text auf der rechten Seite darum fliesst.
  • width: 50% gibt an dass das Bild die Hälfte der Breite seines Parent-Containers aufweist. Der Parent-Container ist hier Article
  • Damit das Bild seine Proportionen beibehält und nicht verzerrt wird, habe ich die Höhre mit height: auto; festgelegt. Der Browser errechnet sich nun aus der tatsächlichen Breite die proportionale Höhe aus.
  • Zu guter Letzt noch ein Margin von 10 Pixeln auf der rechten Seite, damit der Text nicht am Bild anklatscht sondern einen optisch schönen Abstand hält.

Das Ergebnis sieht so aus:

float: right;

Wenn wir nun das Bild auf der rechten Seite anordnen wollen, dann können wir das mit ein paar wenigen Änderungen in der .float-Klasse erreichen.

      .float {
        width: 50%;
        height: auto;
        float: right;
        margin-left: 10px;
      }

Geändert wurden:

  • float: left; wurde zu float: right; damit das Bild sich in seinem Parent-Container auf der rechten Seite fixiert
  • Damit der Abstand zum Text nun auf der linken Seite des Bildes ist mmusste margin-right in margin-left abgeändert werden

Das Ergebnis sieht nun so aus:

Die Float-Eigenschaft sorgt also unter Anderem dafür dass wir Bilder optisch gut in einem Fliesstext unterbringen können. Die Anwendung ist, wie in diesem Beispiel gut ersichtlich, nicht allzu kompliziert. Hier findest Du weitere Infos zum Thema float.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.