2016-04-07 24 views
0

Ich versuche, eine ansprechende Breite auf einige Boxen innerhalb eines absoluten Container hinzuzufügen:Responsive Breite der Elemente innerhalb der absoluten div?

JSFiddle

-Code-Schnipsel in Bezug auf Container und Kastenelemente:

.popbody{ 
    position: absolute; 
    margin: auto; 
    top: 0; left: 0; bottom: 0; right: 0; 
    max-width: 830px; 
    max-height: 450px; 
    width: 100%; 
} 

.popboxes{ 
    position: relative; 
    width: 100%; 
    max-width: 166px; 
    min-width: 120px; 
    height: 100%; 
    max-height: 90px; 
    min-height: 75px; 
    float: left; 
} 

den Behälter geben und Bei Kästchen a 100% wird eine ansprechende Breite beim Ändern der Größe des Browsers nicht aktiviert. Wenn ich versuche, die Boxelemente innerhalb eines div mit nicht-absoluter Positionierung und 100% Breite zu verpacken, bricht es die Dinge.

Ist es möglich zu erreichen, was ich versuche zu tun, oder verwende ich nur einen schlechten Ansatz?

Vielen Dank!

Antwort

0

Nicht sicher, ob Sie das wollen, aber die Werte für die minimale und maximale Breite in vw oder a% ändern, so dass die Boxen nicht beschädigt werden.

DEMO

.popbody{ 
    position: absolute; 
    margin: auto; 
    top: 0; left: 0; bottom: 0; right: 0; 
    max-width: 830px; 
    max-height: 450px; 
    width: 100%; 
} 

.popboxes{ 
    position: relative; 
    width: 100vw; 
    max-width: 20vw; 
    min-width: 15vw; 
    height: 100%; 
    max-height: 90px; 
    min-height: 75px; 
    float: left; 
} 

.boxinner{ 
    position: absolute; 
    background: blue; 
    left: 0; 
    right: 12px; 
    top: 0; 
    bottom: 8px; 
} 

.redbox{ 
    position: relative; 
    width: 100vw; 
    max-width: 50vw; 
    height: 100%; 
    float: right; 
    background-color: red; 
} 

Viewport Sized Type

+0

Vielen Dank! Wenn niemand mit einer besseren Antwort kommt, werde ich Ihr Feedback heute Abend als richtige Antwort geben. Denken Sie, ich sollte mit der Verwendung dieser vw-Messungen kämpfen oder sollte ich einfach Medienabfragen verwenden, um feste Größen für verschiedene Geräte zu verwenden? Dies ist nicht für eine formelle Website, es ist eher eine Codierung Herausforderung – Doge

+0

@ Doge persönlich Ich habe gerade begonnen, Viewport zu verwenden und finde es sehr nützlich. Ich benutze normalerweise eine Mischung aus Viewport und%, habe nicht wirklich viel mit Medienabfragen gemacht, also ist es nicht das Beste zu fragen. – Shniper

Verwandte Themen