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

Feedback gewünscht bilder mit Text nebeneinander

D

Deleted member 37976

Guest
Hallo Html Freunde

Ich habe hier zwei Skripte jedes funktioniert für sich! Ich möchte aber „Bild+Text“ 1.Skript so auf die Webseite kommt wie im 2. Skript also nebeneinander. Würde mich über konstruktive Tips freuen!!!

Bilder mit Text verbunden:
<div ="">
<div style="width: 234px;"><img src="bild.jpg"
alt="Banner" border="0" height="60" width="234">
<p>Text unterhalb einer Grafik, dessen Breite auf die der Grafik
begrenzt ist.<br>
Hier ist der Text in einem Absatz, was zu einem größeren Abstand zum
Bild führt. Der Abstand kann durch Zuweisung eines margin-top-Wertes
korrigiert werden.
</p>
</div>
<br>
<div style="width: 234px;">
<img src=" bild.jpg " alt="Banner" border="0"
height="60" width="234">
<p>Text unterhalb einer Grafik, dessen Breite auf die der Grafik
begrenzt ist.<br>
Hier ist der Text in einem Absatz, was zu geinem größeren Abstand zum
Bild führt. Der Abstand kann durch Zuweisung eines margin-top-Wertes
korrigiert werden.
</p>
</div>
<div style="width: 234px;">
<img src=" bild.jpg" alt="Banner" border="0"
height="60" width="234">
<p>Text unterhalb einer Grafik, dessen Breite auf die der Grafik
begrenzt ist.<br>
Hier ist der Text in einem Absatz, was zu geinem größeren Abstand zum
Bild führt. Der Abstand kann durch Zuweisung eines margin-top-Wertes
korrigiert werden.
</p>
</div>
</div>

2 Bilder in einer Reihe gesetzt
PHP:
<div>
<img src="bild1" width="120" height="96" alt="" style="margin:5px" align="left">
<img src="bild2" width="120" height="96" alt="" style="margin:5px" align="left">
<img src="bild3" width="120" height="96" alt="" style="margin:5px" align="left">
<img src="bild4" width="120" height="96" alt="" style="margin:5px" align="left">
</div>
Danke im Voraus
 
Werbung:
Ich kenn das mit Flexbox. Aber meine Frage ist wie ich es mit den meinigen beiden Skrips mache.
 
Werbung:
Ich kenne Flexbox vom Namen her, verstehe es aber nicht. Was für ein Guide? Praktisch ist mir aber bei meiner Frage dadurch nicht geholfen. Es reicht eine ccs zeile? In meinen Skripten geht es um verschiedene Möglichkeiten Bilder darzustellen! Einmal BildundText, hier werden sie untereinander und im zweiten Skript sind nur die Bilder nebeneinander auf der Webseite dar gestellt. Mich auf Flexbox zu "verweisen" hat nichts mit meiner Frage zu tun, wenn das dann keiner weiß.... einfach sagen.
 
Ich kenne Flexbox vom Namen her, verstehe es aber nicht.
Umso mehr solltest du dich mit Grundlagen beschäftigen!

Mich auf Flexbox zu "verweisen" hat nichts mit meiner Frage zu tun
Und wie! Es ist die beste und einfachste Lösung. Klar, ich schreibe jetzt eben die Zeile Code hin, du kopierst sie und fügst sie ein und der einzige Grund warum ich das mache ist, damit das Thema hier jetzt abgeschlossen ist. Problem gelöst! Und was hast du daraus gelernt? Nichts! Dieses Forum ist kein Dienstleister, bei dem du sagst, was du willst, Mitglieder machen es fertig und du kannst es einfach einfügen. Man muss hier auch Eigeninitiative zeigen.

Hier ist dein Code:
HTML:
<div style="display: flex">
  <div style="width: 234px;"><img src="bild.jpg" alt="Banner" border="0" height="60" width="234">
    <p>Text unterhalb einer Grafik, dessen Breite auf die der Grafik begrenzt ist.<br> Hier ist der Text in einem Absatz, was zu einem größeren Abstand zum Bild führt. Der Abstand kann durch Zuweisung eines margin-top-Wertes korrigiert werden.
    </p>
  </div>
  <br>
  <div style="width: 234px;">
    <img src=" bild.jpg " alt="Banner" border="0" height="60" width="234">
    <p>Text unterhalb einer Grafik, dessen Breite auf die der Grafik begrenzt ist.<br> Hier ist der Text in einem Absatz, was zu geinem größeren Abstand zum Bild führt. Der Abstand kann durch Zuweisung eines margin-top-Wertes korrigiert werden.
    </p>
  </div>
  <div style="width: 234px;">
    <img src=" bild.jpg" alt="Banner" border="0" height="60" width="234">
    <p>Text unterhalb einer Grafik, dessen Breite auf die der Grafik begrenzt ist.<br> Hier ist der Text in einem Absatz, was zu geinem größeren Abstand zum Bild führt. Der Abstand kann durch Zuweisung eines margin-top-Wertes korrigiert werden.
    </p>
  </div>
</div>
Das ist die einzige Änderung (1. Zeile):
style="display: flex"

Was für ein Guide?
Da frage ich mich glatt, ob du da nicht einen Beitrag übeserhen hast:
Schau dir mal 'Flexbox' an - damit sollte das klappen.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/



wenn das dann keiner weiß.... einfach sagen.
Tja, und ich glaube dazu äußer ich mich gar nicht erst weiter...
 
Werbung:
Zurück
Oben