Bilder nebeneinander darstellen

[padawan]

Hallo,

ich bin noch blutiger Anfänger, aber hochmotiviert bei der Erstellung meiner ersten Webseite Ich habe bislang nur eine vorhandene Seite gepflegt und daher nur "Learning-by-Doing-Änderungskenntnisse".

Aktuell stehe ich vor folgendem Problem:
Ich habe in einem div-Element 3 Bilder eingefügt. Diese werden untereinander dargestellt - sollen nebeneinander dargestellt werden.
Kann mir bitte jemand sagen, was ich in CSS ändern muss, dass das funktioniert?
Ich habe versucht die Bilder links zu floaten, aber leider ohne Erfolg. Dem div habe ich eine Breite von 100% zugewiesen, aber das ändert auch nichts.

Ich bin ratlos, bitte rettet mich
Danke schonmal vorab.

[Kahmoon]

3 Elemente in einem Div klingt nach HTML Bastelarbeit. Vermutlich kannst du das über Bildelemente viel leichter machen ;-)

Ohne einem Link zur Seite wird dir hier aber kaum einer helfen können.

[clavis]

Ohne direkten Zugriff ist das tatsächlich etwas Kaffeesudleserei.
Aber ein Versuch: Schau vielleicht einmal in den Debugger ob die 100% Breite überhaupt einen Effekt haben. 100% bedeudet ja nur "nimm die volle - dir zu verfügung stehende - Breite ein". Wenn also z.B. das umschließende Element nur 60 Pixel breit ist, wird der DIV auch nicht mehr haben.

lg
Clavis

[tab]

Zumindest der Quellcode des divs mit den drei Bildern drin wäre schon mal wenigstens etwas. Sind das drei ce_image oder einfach nur <img> Tags ohne alles? Wenn du natürlich die <img> jeweils innerhalb ihres ce_image floatest, kann das nicht viel werden.

[padawan]

Danke erstmal für eure Antworten.

Vielleicht geh ich an die Sache total falsch ran?
Ich soll 3 Bilder darstellen, die nebeneinander sind und jeweils eine Beschreibung (z.B. "Unser Angebot") haben. Ich möchte diese als Links haben, so dass man beim Klick auf das Bild gleich weitergeleitet wird.

Ich hatte es mit Hyperlinkelementen und mit Bildelementen versucht. Aber irgendwas mach ich doch falsch, dass die Bilder immer untereinander sind...

Link kann ich leider keinen posten, da die ganze Sache noch zu tief in den Kinderschuhen steckt um es irgendwo hoch zu laden.

[Andreas]

Ob du Hyperlink oder Bild nimmst ist eigentlich egal, sie haben nahezu das gleiche Markup

<div>
  <figure>
    <a>
      <img>
    </a>
    <figcaption>
      Image caption
    </figcaption>
  </figure>
</div>

Du musst mit CSS an die Sache ran, damit müsstest du eigentlich alles umsetzen können, was du möchtest. Z.B.

/* CSS */
.ce_hyperlink {
  float: left;
  width: 33.3333%;
  /* evtl. noch */
  margin: 0;
  box-sizing: border-box;
} 

Das wäre ein Ansatz mit float:left, aber es gibt auch Lösungen mit display:inline-block, display:table|table-row|table-cell, display:flex, Grid-System usw.

[padawan]

Vielen Dank Andreas für deine genaue Beschreibung. Ich habe es so versucht, wie du geschrieben hast.
Bei mir werden dann die Bilder wie gewünscht nebeneinander dargestellt, allerdings nur sehr klein.
Sobald ich .ce_hyperlink auf 33% Breite setze, haben die Bilder nur noch 33% ihrer ursprunglichen Größe und sehr viel Platz zwischendrin.

Mein HTML sieht wie folgt aus:

<div class="ce_hyperlink block">
<figure class="image_container">
<a title="..." class="hyperlink_img" href="..." target="_blank" rel="">
<img width="1259" height="1370" alt="" src="..." />
</a>
<figcaption class="caption" style="width:1259px">
Unser Angebot - Erfahren Sie mehr!
</figcaption>
</figure>
</div>

Und CSS dazu:

.ce_hyperlink{
width: 100%;
float: left;
margin: 0;
box-sizing: border-box;}

img {
max-width: 100%;
height:auto;
border: 0;
}

.image_container {
width: 30%;
}

#main figcaption{
max-width: 100%;
float: none;
display: run-in;
margin-top: 20px;
margin-bottom: 20px;
}

Ich schäm mich schon total für die Frage, aber ich steh ja sowas von auf dem Schlauch, ich kann es selbst nicht fassen
Wie bekomme ich jetzt die Bilder auf die volle Breite meines 30% breiten Imagecontainers?

[Andreas]

Du solltest einen Link zur Seite zeigen. Das wäre sonst zu viel Spekulation. Probiere auch mit den Dev-Tools deines Browsers da ran zu gehen.

[padawan]

Du solltest einen Link zur Seite zeigen. Das wäre sonst zu viel Spekulation. Probiere auch mit den Dev-Tools deines Browsers da ran zu gehen.

Link zur Seite habe ich leider nicht, da alles noch lokal ist.

Mit den Dev-Tools habe ich schon geschaut, aber den Fehler selbst nicht finden können

[tab]

Ist natürlich alles nur lesen aus der Glaskugel, aber probier mal, die 30%-Breite bei .image_container rauszunehmen. Das scheint mir keinen Sinn zu machen. Edit: Jedenfalls, wenn .ce_download .ce_hyperlink auf 33% gesetzt wird...