• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder in eine Zeile machen

K

kallifabio

Neues Mitglied
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) Situation.PNG

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) Code.PNG
 
Werbung:
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
 
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.
 
Werbung:
Als Framework benutze ich Materializecss.

HTML: 
<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>
 
@basti1012 @MrMurphy

Ich habe das jetzt, so wie ich das wollte.Fertig.PNG

So sieht der Code jetzt aus:
HTML: 
<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.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben