|
|||
Drei Boxen mit gleicher Höhe in allen Browsern
Hallo,
ich habe in Wordpress mit einem Content Editor drei Boxen erstellt, mit grauem Hintergrund und dunkelgrauem Rand, die nebeneinander sind und unterschiedlich viel Text enthalten. Jetzt werden die Boxen mit einer unterschiedlichen Höhe dargestellt. Ich hätte aber gerne, dass die Boxen immer die gleiche Höhe (der Box mit dem meisten Text) haben. Zusätzlich habe ich festgestellt, dass die boxen auch noch in jedem Brwoser unterschiedlich dargestellt werden. In Firefox sind die beiden rechten Boxen gleich hoch, in Chrome ist die rechte länger usw. Die rechte Box enthält auf jeden Fall den meisten Text. Im Anhang ist mal ein Bild, der aktuellen Ansicht in Firefox. Über den Content Editor kann ich den Boxen (jeer einzeln) sowohl eine neue Class als auch eine ID zuweisen. Hier ist das, was ich an aktuellem css sehen kann (Wobei ich nicht weiß, was da überhaupt relevant ist): Code:
.thrv_wrapper, .ignore_during_draggable { margin-top: 20px; margin-bottom: 20px; padding: 1px; } .thrv_wrapper div { box-sizing: content-box; } .thrv_wrapper.thrv_contentbox_shortcode { position: relative; } .tve_flt .tve_white.tve_cb.tve_cb5 { border: 2px solid #D3D1D1; } .tve_white.tve_cb.tve_cb5 { background: #EFEFEF; } .tve_flt .tve_cb { width: auto; } .tve_flt .tve_cb { width: auto; } .tve_flt .tve_cb .tve_cb_cnt { padding: 20px; } .tve_flt .tve_white.tve_cb .tve_cb_cnt > p { margin: 0px; } .tve_cb_cnt::after { content: ""; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .tve_oth, .tve_thc { padding: 0% 2% 0% 0%; width: 32%; } Kann mir jemand sagen, wie ich es schaffe, dass diese drei Boxen immer in gleicher Höhe angezeigt werden (in allen Browsern)? Vielen Dank für eure Hilfe! |
Sponsored Links |
|
|||
Dafür gibt es flexbox, warum verwendest du es nicht?
|
Sponsored Links |
|
|||
Danke
Hallo cloned,
das klingt ganz interessant. Wenn ich es richtig verstehe, müsste ich dann die drei Boxen in einen Container packen und dann den drei Boxen eine Class geben. z.B. hoehe und das dann so verwenden? Code:
.hoehe { align-items: stretch; } |
|
|||
Ja, du musst dem umliegenden Element ein display:flex geben, damit es mal zur flexbox wird. Du musst den drei Boxen auch keine Klasse geben, du machst einfach .box > div{align-items:stretch}
Oder falls das nicht funktioniert gib deinen Kindelementen einfach auch display:flex, wie hier beschrieben (Die Präfix-Versionen im CSS brauchst du eigentlich nciht mehr, die Browser können das auch schon ohne) Suche auch nach "flexbox equal height" um alternative Lösungswege zu finden. |
|
|||
Ok, ich habe das jetzt hinbekommen, dass die boxen die gleiche Höhe haben ... Super! Vielen Dank!
Ein Problem habe ich aber noch. Er zeigt mir jetzt auch auf dem smartphone die drei Boxen nebeneinander an (also ganz schmal nebeneinander). Da wäre es natürlich gut, wenn die dann untereinander wären auf voller Displaybreite. Hast du noch einen Tipp, wie ich das schaffe? |
|
|||
Kurz gesagt mit Mediaqueries.
Du kannst mit flex-wrap:wrap definieren, dass die Boxen sich "wrappen", also auf mehrere Zeilen verteilt werden. Eventuell noch zusätzlich mit mediaqueries width:100% für die Boxen definieren (Weiß jetzt nicht auswendig, ob man das braucht, einfach ausprobieren) |
|
|||
Hallo cloned,
danke, dass du mich mal wieder in die richtige Richtung "gestoßen" hast. Eine letzte Aufgabe habe ich jetzt noch zu bewältigen. Vielleicht kannst du mir da auch den richtigen Tipp geben? Über jeder der 3 Textboxen (die jetzt die gleiche Höhe haben) ist ein Bild, das zu der Box gehört. Es sind also quasi 3 Bilder nebeneinander und darunter drei Textboxen nebeneinander. Auf dem Handy wird das jetzt so angezeigt: Untereinander: Bild1, Bild2, Bild3, Text1, Text2, Text3 Das ist nicht ideal, weil die Texte ja eigentlich zu den Bildern gehören. Ich möchte deshalb folgendes erreichen: Untereinander: Bild1, Text1, Bild2, Text2, Bild3, Text3 Das ist wahrscheinlich im html anders aufzubauen? Deshalb schicke ich hier mal den html code und das css. Aktueller html (Grundaufbau): HTML-Code:
<div class="list"> <div class="list__item"><a href="http://www.link"><img src="bild1.png" scale="0" height="316" width="316"></a></div> <div class="list__item"><a href="http://www.link"><img src="bild2.png" scale="0" height="316" width="316"></a></div> <div class="list__item"><a href="http://www.link"><img src="bild3.png" scale="0" height="316" width="316"></a></div> <div class="list__item_text" style="background-color:rgba(239,239,239,1); border:2px solid #ccc;">Text1</div> <div class="list__item_text" style="background-color:rgba(239,239,239,1); border:2px solid #ccc;">Text2</div> <div class="list__item_text" style="background-color:rgba(239,239,239,1); border:2px solid #ccc;">Text3</div> </div> Code:
.list { display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .list__item { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 33%; float: left; width: 318px !important; margin-left: 5px; margin-right: 5px; } .list__item_text { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 274px !important; margin-left: 5px; margin-right: 5px; margin-top: 10px; padding: 20px; font-family: Raleway; align: center; } |
|
|||
Schmeiß deine div-Boxen (divitis) weg. Gehört etwas zusammen, dann gib es auch zusammen.
Code:
<ul class="ich bin eine richtige liste"> <li><p><img src="some/pic.jpg"> Da ist ein Text. Und weil das Bild im Selben Paragraph steht, wird es auch nicht vom Paragraph getrennt</p> </li> <li><p><img src="some/pic.jpg"> Da ist noch ein Text. Und weil das Bild im Selben Paragraph steht, wird es auch diesmal nicht vom Paragraph getrennt</p> </li> </ul> |
|
|||
Hallo cloned,
das mit der richtigen Liste hatte ich probiert, aber dann zwingt mir das Theme solche Aufzählungszeichen auf:
Und diese Punkte habe ich nicht wegbekommen, deshalb die div-Variante. Hast du eine Idee, wie ich die Punkte "unterdrücke" wenn ich eine Liste mache? Das scale-Attribut ist irgendwie noch aus dem Content Builder gewesen und habe ich einfach mitkopiert (habe aber keine Ahnung, was das bewirkt). Also, wenn ich die Punkte wegbekomme, mache ich gerne eine Liste. Falls ich die Punkte nicht weg bekommen kann, brauche ich eine andere Lösung. |
Sponsored Links |
|
|||
mit
Code:
ul{list-style-type:none} Was das scale-Attribut bewirkt wüsste ich auch gerne, weil das gibt es im HTML gar nicht. Also ich kann dir sagen, was es bewirkt: Gar nichts. Aber es wäre schön zu wissen, was sie theoretisch bewirken sollen. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Horizontales Menü wird in verschiedenen Browsern mit unterschiedlicher Höhe angezeigt | christianj74 | CSS | 5 | 01.03.2016 09:06 |
Boxen mit unterschiedlicher Höhe floaten | just4download | CSS | 7 | 19.09.2010 21:45 |
input feld + submit button auf gleicher höhe. funktioniert außer in IE8 + FF2+3 | monran | CSS | 4 | 04.12.2009 10:07 |
2 div boxen mit gleicher Höhe | katoc | CSS | 7 | 23.07.2008 15:25 |
Automatische Höhe zweier Boxen | Abschluss auf gleicher Höhe | mischa | CSS | 5 | 07.02.2005 18:21 |