Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

    /* Dienstleistungen*/

    .dienstleistungen{

      justify-content: center;

      width: 75%;      

    }

    .mofa-zündung-service{

      height: 50%;

      width: auto;

    }

    .mofa-getriebe-revisionen{

     height: 25%;

     width: auto;

     align-self: top;

    }

    .mofa-vergaser-tuning{

      height: 25%;

      width: auto;

      align-self: top;

    }

   

    .mofa-kolben-ersatzteile{

      height: 25%;

      width: 50%;

    }

    /*!Dienstleistungen*/

HTML:

    <h3>Dienstleistungen</h3>

    <div class="Dienstleistungen">

        <li><a href="#">Service</a></li>

        <li><a href="#">Revisionen</a></li>

        <li><a href="#">Tuning</a></li>

        <li><a href="#">Ersatzteile</a></li>

        <div class="bilder_dienstleistungen">

            <img src="Bilder/zündung.jpg" alt="zündung" class="mofa-zündung-service">

            <img src="Bilder/mofa-getriebe.png" alt="getriebe" class="mofa-getriebe-revisionen">

            <img src="Bilder/vergaser 2.png" alt="vergaser" class="mofa-vergaser-tuning">

            <img src="Bilder/kolben.png" alt="kolben"   class="mofa-kolben-ersatzteile">

        </div>

    </div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

Bild zum Beitrag
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, developement, developer, Programmiersprache, Webdesign, Webdesigner, Webentwicklung, Frontend, Visual Studio Code
fehlende array-codes?

moin, leute, habe mal ne frage. in dem folgendem code habe ich eine style.html eingebunden, was auch bisher immer geklappt hat. aber jetzt habe ich einen neuen server (webspace war zu klein) und habe jetzt klappt die website nicht mehr so wie früher.. ich habe die datei kopiert, und auch wie sonst in selbe verzeichnis eingrtargen, doch meine website sagt mir undefinierter array schlüsel in zeile ... kann mir da jemand helfen?

meine index.php datei:

<!DOCTYPE html>
<html>
  <head>
  <?php include 'style.html'; ?>
<br><br>
<br>Zum Anhören der jeweiligen Dateien, bitte auf die "Play" - Taste drücken.<br>
<br>Zum Downloaden der jeweilligen Dateien, bitte auf den Namen drücken.<br>

<?php
$files = scandir('.');
//exec("find . -type f -name \"*.mp3\" -printf \"%TY%Tm%Td%TH%TM%TS %p\n\" |sort -nr|sed 's/[[:digit:]]\+\.[[:digit:]]\+ \.\///'", $files, $retval);
$total = count($files);
$images = array();
for($x = 0; $x <= $total; $x++) {
	if ($files[$x] != '.' && $files[$x] != '..' && strtolower(substr($files[$x], -4)) == ".mp3") {
		$images[] = $files[$x];
	}
}
?>

<?php
for ($x=0;$x <= count($images);$x++) {
	if (strtolower(substr($images[$x], -4)) != ".mp3") { continue; }
	if ($x %2) { $tdcolor="#000"; } else { $tdcolor="#191919"; }
	print("
		<tr><td bgcolor=$tdcolor><a href=\"" . $images[$x] . "\" download>" . mb_strimwidth(str_replace(array("+", ".", "_"), " ", strtolower(substr($images[$x], 0, -4))), 0, 75, "|") . "</a><br><br>
<audio controls preload=\"none\">
 <source src=\"$images[$x]\" type=\"audio/mpeg\" />
Your browser does not support the audio element.
</audio>

");
}
?>
</table>
</body></html>

und noch mien style.html datei:

<!DOCTYPE html>
<html lang="de">
<head>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<META http-equiv="refresh" content="100000">
  </head>
  <body bgcolor="black" text="lime" alink="red" hlink="#005500" link="#008800">
	<div align="right"><form><input type="button" value="X" onClick="window.close()" style="color:green;background:#002200;border:none;font-size:18px;font-weight:bold" autofocus></form></div>
	<table border="0" align="center" cellpadding="5" cellspacing="10">
	  <tr><td align="center" bgcolor="#000"><font size="4"></font>

und der fehlercode schicke ich euch in den anhang

mfg jeremy

Bild zum Beitrag
HTML, PHP, Programmiersprache
Warum gibt es nichts anderes als JavaScript im Browser Frontend?

Es gibt Dart-Flutter, C#-Blazor soweit ich weiß, aber ich nehme an, es ist nur JavaScript unter der Haube.

Ähnlich wie, wenn man React Native Code schreibt, wird es in die native mobile Sprache umgewandelt => Kotlin, Swift etc..

Weil soweit ich weiß, versteht der Browser nichts anderes als HTML, CSS und JavaScript.

Es gibt da nur die V8-Engine / andere JavaScript-Engines.

Aber warum?

Wieso ist es nicht theoretisch möglich, einfach mit einer neuen Sprache die für cross platform entwickelt wurde, einen onclick-Event Listener zu nutzen?

In einer ganz eigenen Engine.

Heißt nicht, das sie JavaScript irgendetwas die nächsten 5 Jahre streitig machen könnte, aber wenn diese Sprache direkt Typisierung unterstützen würde, ohne TypeScript und auch noch für andere Dinge besser geeignet wäre als JavaScript (wurde halt nicht dafür designed, ganz egal ob Electron, Native existiert) wie Desktopanwendungen, Mobil, etc..

PHP nehme ich erst garnicht auf, das macht alleine gar nichts im Frontend, ist eine Backendsprache und alleine sinnlos auf Websites, bis auf bisschen HTML generieren, das auch nur vom Server kommt.

Klar, wenn du ewig lange Weiterleitungen willst, die furchtbar sind und überhaupt nicht interaktive Websites, dich auf Formulare beschränkst, dann kriegst du das auch ohne JavaScript hin, etwas Schreckliches zu programmieren.

Mit WebAssembly kenne ich mich gar nicht aus. Ob da Event Listener, usw. möglich sind. Aber alleine von der Einstiegshürde und Komplexität die ich höre, ist das keine Alternative.

Assembly ist auch keine Alternative zu C++. Dafür gibt es Rust.

Browser, App, HTML, Webseite, JavaScript, HTML5, Assembler, Informatik, Programmiersprache, Softwareentwicklung, Webentwickler, Webentwicklung, Anwendungsentwickler, React Native

Meistgelesene Beiträge zum Thema Programmiersprache