Schwimmdock divs 100 Breite, wenn sie auf separate Leitung

Question

Ich versuche, die folgenden Floating-Layout zu erzielen:

Die beiden inneren divs (rot + grün) sollten nebeneinander unter Verwendung von 60% aufgestellt werden, und 40% der äußeren divs Gesamtbreite.

Immer wenn das Fenster so skaliert wird, dass der grüne und rote Inhalt nicht auf eine Zeile passt, sollte jedes innere div eine eigene Zeile mit 100% der äußeren div-Breite haben.

bearbeiten: Ich weiß nicht, wann die Größenänderung donw sein sollte. Dies hängt vom Inhalt der div ab. In meinem Fall 2 dynamisch erstellte Tabellen. Wenn die Tabellen nebeneinander angezeigt werden können, sollten sie in einer Reihe stehen. Wenn nicht (wegen zu vielen Spalten, zu langen Texten usw.), sollten sie in zwei Zeilen aufgeteilt werden. Eine Medienlösung (mit festen Breakpoints hilft mir daher nicht weiter). Wissen Sie nicht, ob das nur mit CSS möglich ist oder ich hier ein paar js einbinden muss?

Ist dies nur mit css/html erreichbar?

Answer 1

Sie können mit Flexbox Layout ziemlich nah dran, aber die Breite der beiden Reihen wird nicht das gleiche sein, wenn einpacken und blättert zur gleichen Zeit passiert, . Ich denke, Sie müssen Medienabfragen oder Javascript verwenden, um das Problem bei Bedarf zu beheben.

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.item { 
 
    height: 100px; 
 
} 
 
.item-1 { 
 
    background: aqua; 
 
    flex: 1 1 60%; 
 
} 
 
.item-2 { 
 
    background: gold; 
 
    flex: 1 1 40%; 
 
}

<div class="container"> 
 
    <div class="item item-1"> 
 
    <div style="width:600px;">1</div> 
 
    </div> 
 
    <div class="item item-2"> 
 
    <div style="width:400px;">2</div> 
 
    </div> 
 
</div>

jsFiddle

Answer 2

Nur Medienabfragen, um es zu erreichen. Sie können eine andere CSS-Datei verwenden, in der Sie alle Ihre CSS-Dateien für mobile (einschließlich iPad und Tablets) Größen speichern können. Sie können auch CSS-Frameworks wie Bootstrap, Foundation und materializecssm verwenden, die bereits eine Lösung für diesen Fall haben.

Probe:

//mobiles 
 
@media (max-width: 479px) { 
 
    .red{width:100%} 
 
    .green{width:100%} 
 
} 
 
//mobiles to ipad/tablet 
 
@media (min-width: 480px) and (max-width: 767px) { 
 
    .red{width:100%} 
 
    .green{width:100%} 
 
} 
 

 
//laptop 
 
@media (min-width: 768px) and (max-width: 991px) { 
 
    .red{width:60%} 
 
    .green{width:40%} 
 
} 
 
//small monitors 
 
@media (min-width: 993px) and (max-width: 1059px) { 
 
    .red{width:60%} 
 
    .green{width:40%} 
 
} 
 
//standard to large monitors 
 
@media (min-width: 1060px) and (max-width: 1199px) { 
 
    .red{width:60%} 
 
    .green{width:40%} 
 
} 
 
//large monitors 
 
@media (min-width: 1200px) { 
 
    .red{width:60%} 
 
    .green{width:40%} 
 
}