verteilen Restplatz in zwei Container neben einer festen Breite Container

Ich habe drei Container, left, middle und right. Das Breitenverhältnis beträgt 15%, 70% und 15%. Ich möchte die maximale Breite des mittleren Containers auf 1000 px beschränken.verteilen Restplatz in zwei Container neben einer festen Breite Container

Dies funktioniert gut, solange die Bildschirmauflösung unter 1428px ist. Wenn die Bildschirmauflösung größer als 1428 Pixel ist, wird 70% größer als 1000 Pixel. Also muss ich eine andere Regel für diesen größeren Bildschirm schreiben.

So mittlerer Container ist jetzt 1000px. Wie kann ich Restplatz auf andere zwei Container verteilen - left und right? Eine JavaScript-Lösung sorgt für einen gewissen Sprung/Shake im Browser. Ich möchte diese Erschütterungen im Browser vermeiden.

Quelle

2016-07-15 chanchal118

vielleicht etwas wie 'width: calc ((100vw - 1000px)/2);' Ich nehme an, das ist, was Sie wollen, aber http: // caniuse.com/#feat=calc hier ist Browser-Unterstützung für die Regel :) –

OK also hier ist, wie die Dinge sind. Ich nehme an, Sie html etwas wie dieses:

HTML:

<body> 
<div class="left"></div> 
<div class="center"></div> 
<div class="right"></div> 
</body>

So haben Sie css wie diese anwenden (ich weiß nicht, ob Sie mit Browser-Unterstützung zufrieden sind, aber ich denke, es gibt keine CSS nur eine andere Art und Weise)

CSS:

html,body{ 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
} 
.left,.right,.center{ 
    float:left; 
    margin:0; 
    padding:0; 
    display:inline-block; 
    height: 100px; 
} 
.left,.right{ 
width:15%; 
background:yellow; 
} 
.center{ 
    background:red; 
    width:70%; 
    max-width:1000px; 
} 
@media(min-width:1000px){ 
    .left,.right{ 
    width:calc((100vw - 1000px)/2) 
    } 
}

https://jsfiddle.net/Lghms68y/ Hier ist eine Geige. HINWEIS: Sie müssen die Seite verkleinern, um den Effekt zu sehen :)

Quelle

2016-07-15 07:12:57

verteilen Restplatz in zwei Container neben einer festen Breite Container

Antwort

Verwandte Themen