Wie mache ich den rechten Rand doppelt so groß wie der linke Rand

Ich habe eine feste Größe innere div innerhalb einer variablen Breite div.Wie mache ich den rechten Rand doppelt so groß wie der linke Rand

#outer { width: 100%; } 
 
#inner { width: 80px; }

<div id="outer"> 
 
    <div id="inner"></div> 
 
</div>

Ich möchte das innere div innerhalb der äußeren div platziert wird, wie folgt:

[Npx of empty space][80px fixed-size inner div][2Npx of empty space]

wobei N eine Zahl ist. Wenn sich die Fenstergröße ändert, ändert sich N, aber das Recht bleibt doppelt so groß wie das linke. Ist es möglich mit CSS zu tun?

Quelle

2016-09-01 George

Als Alternative zur Positionierungsoption von Herrn Lister können wir calc an den Rändern verwenden.

#outer { 
 
    width: 100%; 
 
} 
 
#inner { 
 
    width: 80px; 
 
    height: 35px; 
 
    background: rebeccapurple; 
 
    margin-top: 1em; 
 
    margin-left: calc((100% - 80px)/3); 
 
    margin-right: calc((100% - 80px)/(3 * 2)); 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    </div> 
 
</div>

Quelle

2016-09-01 21:32:22

Schön. Ich mache nicht viel Front-End-Arbeit. Wird Kalk gut genug unterstützt? Ich war schon immer gespannt, ob es benutzt werden sollte. Ich weiß, IE11 macht manchmal seltsame Dinge mit verschachtelten Berechnungen nach "calc ((100% - 80px)/3);" –

Vielen Dank. Gibt es einen Fallback, wenn Calc nicht unterstützt wird? Wird es anmutig degradieren? – George

Calc-Unterstützung - http://caniuse.com/#feat=calc –

Ich würde es so machen, es sollte gut funktionieren, wenn Sie die Größe ändern. Fühlen Sie sich frei, die Prozentsätze leicht zu zwicken.

<div id="outer"> 
    <div id="inner-container"> 
     <div id="inner"> 
     </div> 
    </div> 
</div> 

#outer { 
    width: 100%; 
} 
#inner-container { 
    width: 66%; 
    margin: 0 auto 0 0; 
} 
#inner { 
    width: 80px; 
    margin: 0 auto; 
}

Ich habe einen Codepen für Sie hier gemacht, wenn Sie damit herumspielen wollen. Ich habe einige Hintergrundfarben hinzugefügt, um zu veranschaulichen, was passiert.

Example CSS offsetting

Quelle

2016-09-01 19:12:09

Danke. Dies ist eine gute Option. Es sieht so aus, als wäre es nicht genau, es sei denn, die Breite von #inner div ist vernachlässigbar im Vergleich zur Breite von div. Aber ich mag, dass es nicht calc verwendet, so wäre die angebotene Lösung in einigen Fällen. – George

Wenn Sie Prozentsätze und Pixel mischen, erhalten Sie es nie richtig ohne calc() oder einige jQuery das gleiche wie calc() –

Zuerst setzten wir beiden Ränder des inneren div zu auto, so dass jeder Marge würde messen (100% - 80px)/2. Dann müssen wir die div 1/3 diejenigen nach links verschieben , so positionieren wir es relativ, durch (100% - 80px)/6.

#outer { 
 
    width: 100%; 
 
} 
 
#inner { 
 
    width: 80px; 
 
    
 
    margin-left: auto; margin-right: auto; 
 
    position: relative; left: calc(13.33px - 16.67%); 
 
    
 
    /* to make it visible */ 
 
    background: cyan; height: 30px 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    </div> 
 
</div>

(Beachten sie, dass die letzte Zeile des CSS für Sichtbarkeit Zwecke in diesem snippet ist nur.)

Quelle

2016-09-01 19:14:46

Vielen Dank. Dies ist eine gute Option. – George

Wenn die Breite der Box bekannt ist, dann können Sie calc vermeiden wie folgt. Sie müssen die Breite (80px) und den linken Rand (= 80px/3) in Ihrem CSS einbetten.

#outer { 
 
    background-color: powderblue; 
 
} 
 
#inner { 
 
    width: 80px; 
 
    height: 80px; 
 
    background-color: palevioletred; 
 
    position: relative; 
 
    /* 
 
    * push 33.3% of parent width towards right 
 
    * pull 33.3% of own width towards left 
 
    */ 
 
    left: 33.3%; 
 
    margin-left: -26.6px; 
 
}

<div id="outer"> 
 
    <div id="inner"></div> 
 
</div>

Quelle

2016-09-02 13:34:09

Wie mache ich den rechten Rand doppelt so groß wie der linke Rand

Antwort

Verwandte Themen