Text neben Bild

Hdllo · 19 Juni 2020

Hallo, ich möchte eine eBay Artikelbeschreibung mit Bild links und Text rechts davon erstellen, wie auf dem Bild dargestellt.

Folgendes habe ich bisher:

HTML:

<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<img id="bildbereich" src="20200618_155742 2.jpg">
Beschreibung
Artikeldetails

</body>
</html>

CSS:

#bildbereich {
  padding-right: 10%;
  padding-left: 10%;
  width: 30%;
  background-color: #EDEDF8;
}

So sieht das aus:

Wie bekomme ich das gewünschte Design?

Sailor · 19 Juni 2020

Schau dir mal CSS Flexbox... oder auch Grid an, damit sollte es dir gelingen.

Hdllo · 19 Juni 2020

Vielen Dank. Das hat funktioniert.

Hier der Code:

HTML:

<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="container">
<img id="bild" src="20200618_155742 2.jpg">
<div id="beschreibung">Beschreibung</div>
<div id="details">Artikeldetails</div>
</div>
</body>
</html>

CSS:

.container {
  display: grid;
  grid-template-columns:10% 30% 10% 50%;
  grid-template-row:50% 50%;
}

#bild {
  width: 100%;
  grid-column-start:2;
  grid-column-end:3;
  grid-row-start:1;
  grid-row-end:3;
}

#beschreibung {
  grid-column-start:4;
  grid-column-end:5;
  grid-row-start:1;
  grid-row-end:2;
}

#details {
  grid-column-start:4;
  grid-column-end:5;
  grid-row-start:2;
  grid-row-end:3;
}

Vielleicht hat jemand noch einen Tipp, wo ich die CSS Datei hochladen kann, um sie "direkt über einen Link" zugänglich zu machen?

Text neben Bild

Hdllo

Neues Mitglied

Sailor

Aktives Mitglied

Hdllo

Neues Mitglied

Neueste Beiträge