Frage von RhoMalV, 17

Webdesign: Automatische Höhenanpassung von DIV-Containern durch Übernahme der Höhe des benachbarten DIV-Containers?

Hallo,

soweit ich weiß, lässt es sich allein mit CSS nicht realisieren, dass sich in einem responsive Design ein Container automatisch die Höhe des benachbarten Containers übernimmt. Dafür ist noch JavaScript vonnöten, richtig?

Nehmen wir mal an, ich hätte 3 DIV-Container, die per float:left; nebeneinander angeordnet sind und nennen wir diese mal #divA, #divB und #div C.

divB ist ein Bild-Container. #divA und #divC sollen beide die Höhe von #divB übernehmen, ohne dass eine "fixe" Höhe definiert ist.

Wie würde das aussehen?

Danke schon mal.

Antwort
von medmonk, 15

Tabellen ausschließlich zum Darstellen tabellarischer Daten verwenden, aber nicht zum Layouten deiner Website. Daher bitte die Lösung von Dory1 ignorieren. 

divB ist ein Bild-Container. #divA und #divC sollen beide die Höhe von #divB übernehmen, ohne dass eine "fixe" Höhe definiert ist.

Kurz und knapp - freunde dich mit dem Flexbox-Model an. Damit ist so etwas schnell mit wenigen Zeilen Code umgesetzt. Wohl gemerkt mit CSS!

<div class="boxes">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
</div>
.boxes{
  max-width: 900px;
  display: flex;
  margin: 0 auto;
}

.boxes div {flex: 1;}

.box-1 {background-color: red;}
.box-2{background-color: yellow;}
.box-3 {background-color: green;}

»All the magic« in der Display-Eigenschaft flex steckt. ;) Dem Eltern-Element lediglich ein display: flex; geben und den Kind-Elementen ein flex: 1; verpassen. Sobald ein Kind-Element größer als seine Geschwister, diese automatisch mit wachsen. 

LG medmonk 

Antwort
von Dory1, 14

Zur Not kannst du eine eine Tabelle verwenden. 

http://codepen.io/anon/pen/ObPjGw

Kommentar von RhoMalV ,

So richtig funktioniert das aber nicht.
Weder durch "display:table-row;display:table-column; noch durch display:table-cell;".

Mit welchen Attributen sollte das denn funktionieren?

Mit echten Tabellen arbeitet man heut ja nicht mehr, da sie sich kaum für unterschiedliche Bildschirmgrößen anpassen lassen.

Kommentar von Dory1 ,

Solange es nur darum geht, dass die einzelnen Zellen ab einer bestimmten Bildschirmbreite untereinander angeordnet werden - das bekommst du auch mit 'ner Tabelle hin (s. Link).

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten