Bilder in eine Zeile machen

[kallifabio]

Hallo,

ich bekomme es nicht hin, wenn ich mehrere Bilder habe, jeweils immer 2 Bilder links und rechts in eine Zeile zu machen.

Situation: (siehe Bild)

Also ich möchte das Bild inklusive Text von i5 rechts neben i3 steht. i7 dann nächste Zeile darunter - daneben i9, usw.

Kürzer gesagt: i3 und i5 soll in eine Zeile | i7 und i9 soll in eine Zeile darunter


Der dazugehörige Code: (siehe Bild)

 

[basti1012]

Dafür kann man Flexbox benutzen.
Es wäre aber besser wenn du deinen Code in Text posten könntest und nicht als Bild.
Feste breiten machen dein vorhaben aber auch nicht leichter.
Du möchtest ja bestimmt auch das deine Webseite auf Handy und Laptop angeschaut werden kann.
Deswegen wäre Flexbox mit @mediaqueries vorteilhaft.

Ps; figure und figcaption Elemente könnte man hier auch noch dazu nutzen

 

[MrMurphy]

Wenn ich lese "col s12 m4" verwendest du offensichtlich ein Framework. Dann solltest du auch dessen Regeln lernen und anwenden. Inline-CSS wie die width- und height-Angaben haben dort nichts verloren, sind aber auch sonst überflüssig.

Weiterhin werden durch das br-Element Zeilenumbrüche erzeugt, das ist unsinnig. Das br-Element ist heutzutage nur in Ausnahmefällen sinnvoll.

 

[kallifabio]

Als Framework benutze ich Materializecss.

<div class="container">
    <div class="section">
      <div class="col s12 m4">
        <div>
          <img src="../../assets/img/intel_core_i3_prozessoren.png" style="width: 200px; height: 200px;">
          <a href="i3/i3.html"><h5>Intel Core i3 Prozessoren</h5></a>
        </div>
        <br />
        <div>
          <img src="../../assets/img/intel_core_i5_prozessoren.png" style="width: 200px; height: 200px;">
          <a href="i5/i5.html"><h5>Intel Core i5 Prozessoren</h5></a>
        </div>
        <br />
        <div>
          <img src="../../assets/img/intel_core_i7_prozessoren.png" style="width: 200px; height: 200px;">
          <a href="i7/i7.html"><h5>Intel Core i7 Prozessoren</h5></a>
        </div>
        <br />
        <div>
          <img src="../../assets/img/intel_core_i9_prozessoren.png" style="width: 200px; height: 200px;">
          <a href="i9/i9.html"><h5>Intel Core i9 Prozessoren</h5></a>
        </div>
        <br />
        <div>
          <img src="../../assets/img/intel_core_x_prozessoren.png" style="width: 200px; height: 200px;">
          <a href="x/x.html"><h5>Intel Core Extreme Prozessoren</h5></a>
        </div>
      </div>
    </div>
  </div>

 

[kallifabio]

@basti1012 @MrMurphy

Ich habe das jetzt, so wie ich das wollte.

So sieht der Code jetzt aus:

<div class="container">
    <div class="section">
      <div class="row">
        <div class="col s6 m6">
          <img src="../../assets/img/intel_core_i3_prozessoren.png">
          <a href="i3/i3.html"><h5>Intel Core i3 Prozessoren</h5></a>
          <br />
          <img src="../../assets/img/intel_core_i7_prozessoren.png">
          <a href="i7/i7.html"><h5>Intel Core i7 Prozessoren</h5></a>
          <br />
          <img src="../../assets/img/intel_core_i9_prozessoren.png">
          <a href="i9/i9.html"><h5>Intel Core i9 Prozessoren</h5></a>
          <br />
          <img src="../../assets/img/intel_core_i9_extreme_prozessoren.png">
          <a href="x/x.html"><h5>Intel Core i9 Extreme Prozessoren</h5></a>
        </div>
        <div class="col s6 m6 offset-s6">
          <img src="../../assets/img/intel_core_i5_prozessoren.png">
          <a href="i5/i5.html"><h5>Intel Core i5 Prozessoren</h5></a>
          <br />
          <img src="../../assets/img/intel_core_i7x_prozessoren.png">
          <a href="i7/i7.html"><h5>Intel Core i7x Prozessoren</h5></a>
          <br/>
          <img src="../../assets/img/intel_core_i9x_prozessoren.png">
          <a href="i9/i9.html"><h5>Intel Core i9x Prozessoren</h5></a>
        </div>
      </div>
    </div>
  </div>

Die br-Elemente lasse ich trotzdem für einen Abstand drinne.

Ich bedanke mich trotzdem für eure Hilfe.

 

[kallifabio]

Habe jetzt noch figure und figcaption Elemente hinzugefügt.

 

[Aaron3219]

Die br-Elemente lasse ich trotzdem für einen Abstand drinne.

Für so etwas gibt es margin oder padding, wobei margin hier die bessere Wahl darstellt, da es genau für solche Zwecke gemacht ist.

 

[kallifabio]

Okay, Danke. Habe ich so gemacht.