Bootstrap Divs unterschiedlich breit

Simuletsplay · 13. Januar 2021

Hallo Zusammen,

Ich habe folgendes Problem:

Ich habe 8 Divs, die untereinander sind, wo etwas vorgestellt wird.

Dort habe ich jetzt in dem Text-Bereich unterschiedlich lange Texte. Direkt nebenan ein Bild.

PROBLEM: Alle Bilder müssen gleich groß ausgegeben werden.

Die Seite ist aktuell folgende:

https://projekt-x-treme.de/index3.php

HTML

<div height="100px" class="row pt-3 scroll-element">
<div class="col-4 mr-0">
<img class="d-block w-auto h-100" src="/style/img/serv-1.png">
</div>
<div class="col-8 bg-light mr-0 ml-0 p-3 text-dark">
<h3><small><small><span class="font-weight-light"></span></small></small></h3>
<p></p>
IG Admins:
<h6 class="font-weight-light">ServerID: #01</h6>
<h6 class="font-weight-light text-right">Stand: 09.01.2020</h6>
</div>
<!--
FÜR JEDEN 2. DIV
<div class="col-4 pl-0 ml-0">
<img class="d-block w-auto h-100" src="/style/img/serv-1.png">
</div>
-->
</div>

Alles anzeigen

Dort sind die Container alle unterschiedlich hoch und unterschiedlich breit.

Wie bekomme ich das hin, trotz dessen, dass alle Texte inhaltlich unterschiedlich lang sind?

Grüße

Ben

AndreasB · 13. Januar 2021

Was meinst du genau mit

Simuletsplay schrieb:

[...] Alle Bilder müssen gleich groß ausgegeben werden.

?

Das ist ein wenig vage.

Meinst du in der Breite oder in der Höhe oder beides?
Soll dann das ganze Bild zu sehen sein, oder nur ein Ausschnitt?

Wenn nur ein Ausschnitt zu sehen sein soll, welcher Ausschnitt soll es sein?
Wenn das ganze Bild zu sehen sein soll, was soll an den Stellen zu sehen sein, an denen das Bild kleiner als der Rahmen ist?

Sollen auch alle Container gleich breit oder/und hoch sein?

Übrigens:
Schau mal in die Konsole. Ich bin schon bei 186437 Fehlern. Uncaught TypeError: Cannot set property 'textContent' of null at index3.php:425

Simuletsplay · 15. Januar 2021

Also in der Datei gibt es gar keine 425 Zeilen...

Also die Bilder sind erstmal nicht das Problem, die werden im 1:1 Format hochgeladen!

Viel eher ist es, dass die durch die unterschiedliche Länge der Texte automatisch höher werden und dadurch ja auch breiter.

Daher brauche ich irgendwas, dass alle Divs dieser Klasse gleich hoch sind und sich dann am größte orientieren.

AndreasB · 15. Januar 2021

Simuletsplay schrieb:

Also in der Datei gibt es gar keine 425 Zeilen...

Es geht um diese Zeile

JavaScript

document.addEventListener("DOMContentLoaded", () => {
function counter(id, start, end, duration) {
let obj = document.getElementById(id),
current = start,
range = end - start,
increment = end > start ? 1 : -1,
step = Math.abs(Math.floor(duration / range)),
timer = setInterval(() => {
current += increment;
obj.textContent = current; // <- HIER ist obj null !
if (current == end) {
clearInterval(timer);
}
}, step);
}
// Wenn ich das richtig sehe, gibt es in deinem Script keine Element
// mit den ids count1, count2 oder count3.
counter("count1", 0, 5, 1500);
counter("count2", 0, 15, 1500);
counter("count3", 0, 283, 1500);
});

Alles anzeigen

Zu deinem Problem:
Wenn ich das richtig verstehe, möchtest du, dass alle Bilder die gleiche Höhe haben, ausgehend von dem höchsten Bild.

Da sich die Höhe der Bilder an denen der Boxen orientiert, müssen dann auch alle Boxen gleich hoch sein.

Die Höhe einer Box orientiert sich an dem Textinhalt.

Du müsstest also

den Kompletten Textinhalt rendern.
Die höchste Box herausfiltern.
Diese Höhe auf alle anderen Boxen anwenden.

Dadurch sollten alle Bilder die gleiche höhe haben.

Bei sehr großen Boxen, kann es nur sein, dass man nicht mehr viel von den Bildern sieht, da der Ausschnitt zu eng ist.

Diese Idee höre ich das erste Mal und ich denke nicht, dass man das mit Bootstrap hinbekommt.

Ohne custom JavaScript, kommst du da wahrscheinlich nicht weit.

Nachtrag:
Ich habe gerade experimentiert, und herausgefunden, dass du das auch mit CSS Grid machen kannst:
(Also, dass jede Box die gleiche Höhe hat)
https://codepen.io/Mr_Beer/pen/JjRwjxX?editors=1100

Mit Bootsrap 4 geht das aber wohl nicht, grid ist erst ab Bootstrap 5 eingebaut.

Sempervivum · 15. Januar 2021

Ich sehe da ein generelles Problem: Du hast die Breite des Textcontainers auf 66.66% eingestellt und die des Bildes auf 33.33%. Wenn man das Bild jetzt so einrichtet, dass es im Container bleibt und sich nicht nach rechts ausdehnt, wird es relativ klein und der Textcontainer ist viel höher. Ich habe das mal im HTML-Inspektor demonstriert:

div-img-width.png

Macht man das Bild größer, z. B. 50% 50% für die beiden Container, wird es nicht besser, denn dann haben die Texte weniger Platz und nehmen noch mehr Höhe in Anspruch - die Katze beißt sich in den Schwanz. Auch wenn man die Abstände, die Du mit <br> eingestellt hast, verkleinern würde, würde es nicht viel besser.