Responsive Div Tabelle Probleme

Begonnen von tanja.lein, 29 Mai 2017, 14:16

« vorheriges - nächstes »
Nach unten

tanja.lein

Hallo, ich möchte eine responsive Tabelle machen, die links zwei boxen mit etwas Abstand dazwischen übereinander hat (40% Breite) und rechts eine große, die die gleiche Größe hat wie die linken zusammen (60% Breite) (siehe Anhang).

Bis z.B. 800px Seitenbreite sollen die enthaltenen Bilder kleiner werden, unter 800px sollen die beiden linken Boxen unter die rechte rutschen.

Da ich das nicht hinbekommen hab, hab ich das hier mal ausprobiert.

<div class="box-layout linke-box">
    <h1>links große box</h1>
</div>

<div class="box-layout rechte-box rechte-box-erste">
    <h1>rechts erste box</h1>
</div>

<div class="box-layout rechte-box rechte-box-zweite">
    <h1>rechts zweite box</h1>
</div>


.box-layout {
  display: inline-block;
  width: 40%;
  float: left;
  outline: 1px solid #C3C3C3;
  padding: 10px 20px;
  margin: 0 10px;
  background-color: #F0F0F0;
  min-width: 420px;
}

.linke-box {
  min-height: 440px;
}



leider gelingt es mir nicht, das ganze horizontal zu spiegeln und das noch responsiv zu machen.

Kann mir bitte jemand helfen?

LG
Tanja

Jeannie

Zum Thema responsive schau dir bitte einmal folgendes an:

https://www.w3schools.com/html/html_responsive.asp

In deinem Beispiel erkenne ich bis dahin noch keinen reponsiven Gedanken, aber das kann sich ja noch ändern.

Nach oben