Frage an profis

Razorxd1993 · 13.08.2021

Hallöchen ich bin neu in der HTML Szene und versuch mich zurzeit an einer Seite für unseren Clan.
Jetzt zu meiner Frage an die Profis hier.

Wir haben eine Streamer Rubrik, dort wollte ich wie auf der hauptseite: kid.clan.rip die videos(twitch frames) anordnen.
Nur leider setzen sich die frames entweder nebeneinander oder wenn ich sie größer mache untereinander.
Ich wollte wie in der Spiele Rubrik die frames anordnen und links/rechts beschreibungen hinzufügen.

Probiert habe ich : <div> <p> <br>
Leider hat davon nix funktioniert

Ich hoffe auf einigermaßen einsteigerfreundliche Tipps und bitte kein beef/troll/flame, wie gesagt ist das mein erster Versuch ^_^

basti1012 · 13.08.2021

Razorxd1993 schrieb:
Probiert habe ich : <div> <p> <br>

Das ist ja nicht viel.
Du solltest uns den ganzen Code zeigen, mit der CSS .
Das, was du vorhast kann man mit Flexbox machen.
Zb

HTML:

<html>
  <head>
    <style>
    *{
  margin:0;
  padding:0;
  border:1px solid black;
}
body{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
#hauptcontainer{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.video_beschreibung{
  display:flex;
    overflow:hidden;
}
.video,.beschreibung{
  display:flex;
  min-width:200px;
  width:50%;
}
.beschreibung {
    font-size: 30px;
    justify-content: center;
}
video:nth-child(2){
  order:2;
}
.video_beschreibung:nth-child(even) video{
order:2;
}
@media only screen and (min-width: 568px) {
  .video_beschreibung{
    flex-direction:column;
  }
}
    </style>
  </head>
<body>
<main id="hauptcontainer">
  <div class="video_beschreibung">
    <video class="video">
      video
    </video>
    <p class="beschreibung">
      Text
    </p>
  </div>
  <div class="video_beschreibung">
    <video class="video">
      video
      </video>
    <p class="beschreibung">
      Text
    </p>
  </div>
  <div class="video_beschreibung">
    <video class="video">
      video
      </video>
    <p class="beschreibung">
      Text
    </p>
  </div>
  <div class="video_beschreibung">
    <video class="video">
      video
      </video>
    <p class="beschreibung">
      Text
    </p>
  </div>
  <div class="video_beschreibung">
    <video class="video">
      video
      </video>
    <p class="beschreibung">
      Text
    </p>
  </div>
  </main>
</body>
  </html>

Hilft dir das jetzt weiter ?