Hallo,
ich habe drei Tabellen, die als Inline-Elemente nebeneinander dargestellt werden. Jede Tabelle hat eine maximale Breite von 33.3%, sodass jede 1/3 des Bildschirms einnimmt. Da die Tabellen über eine Hintergrundfarbe verfügen, sollen sie alle gleich lang sein. Das Funktioniert auch, so lange eine Zeile nicht länger als 1/3 der Breite ist und somit umgebrochen wird. Dann ist eine Box logischerweise ein Stück größer als die anderen. Ich habe versucht das Problem zu lösen, in dem ich via Javascript die höchste der drei Boxen suche und die anderen zwei auf diese Höhe angleiche:
var boxes = $("#box1, #box2, #box3");
var maxHeight = 0;
boxes.each(function() {
var currentHeight = parseInt($(this).css("height"));
if(currentHeight > maxHeight) {
maxHeight = currentHeight;
}
});
boxes.each(function() {
$(this).css("height", maxHeight + "px");
});
Alles anzeigen
Hier wird der Umbruch bei der Höhe aber nicht berücksichtigt, sodass die eine Box immer noch größer ist als die anderen. Ich habe auch schon versucht, die automatischen Umbrüche zu erkennen und dementsprechend die Höhe zu vergrößern. Hat aber ebenfalls nicht funktioniert, und so wirklich gefällt mir diese Lösung auch nicht.
Da es optisch mit den Umbrüchen gut aussieht und der User so den kompletten Titel lesen kann, wäre es mir am liebsten, wenn die Umbrüche bleiben, aber die Höhe eben entsprechend angepasst wird. Die Titel aber einfach so zu kürzen, dass kein Umbruch erzeugt wird und z.B. am Schluss '...' angehängt wird, wäre aber auch eine Alternative. Auch das ist aber ein Problem, da ich natürlich alles dynamisch machen will. Also keine feste Containergröße, und dann grobe Schätzungen wann der Titel abgeschnitten werden muss oder ähnliche Murksereien.