Fügen Sie einen horizontalen Rand hinzu, wenn Platz verfügbar ist

Ich möchte einen linken Rand von 40px, hinzufügen, wenn Platz verfügbar ist. Und wenn die Elternbreite nicht ausreicht, reduzieren wir sie.Fügen Sie einen horizontalen Rand hinzu, wenn Platz verfügbar ist

Beispiel: Wenn der Vater nur 420 Pixel breit ist, sollte der Abstand auf 20 Pixel reduziert werden.

Wie geht das?

* {margin: 0; padding: 0;} 
 
#parent {resize: both; border: 2px solid; overflow:auto; width: 500px; } 
 
#margin { display: inline-block; background-color: blue; width: 40px; } 
 
#main { display: inline-block; background-color: red; width: 400px; }

<div id="parent"> 
 
<div id="margin">&nbsp;</div> 
 
<div id="main">&nbsp;</div> 
 
</div>

Quelle

2016-04-26 Basj

Zur Bestätigung: Der linke "Rand" sollte immer nur maximal 40px betragen, aber wenn der Elternteil zu klein ist, um den Kind * und * seinen Rand zu enthalten, dann sollte die Marge reduziert werden, ist das, was Sie erreichen wollen ? – Shaggy

@Shaggy: Eltern = 500 => 40 + 400. Eltern = 412 => 12 + 400. Eltern = 370 => 0 + 370. – Basj

Ist "Marge" ein echtes Element oder sollte es unbesetzt sein? Gibt es echten Inhalt in main oder - wenn es nicht genug Inhalt gibt - sollte es schmaler als 400px sein? – FelipeAls

können Sie media queries für diese.

@media screen and (max-width: 420px) { 
    #margin { width: 20px } 
}

https://jsfiddle.net/0evabfLa/

Hier ist eine Animation des obigen Codes, um den Hintergrund zu gelb, wenn die Ränder Änderungen zu ändern.

Quelle

2016-04-26 09:59:37

Medienabfragen funktionieren in dieser Instanz nicht, da das übergeordnete Element manuell skalierbar ist. – Shaggy

Danke für Ihre Antwort! Oh, wirklich, Medienfragen sind dafür nötig? Kein Weg mit einfachen CSS-Tools oder 'calc (...)'? – Basj

Ich bekomme nicht das Gleiche wie deine Animation in Firefox und Chrome. Wenn ich die Elterngröße verändere, funktioniert es nicht so gut. – Basj

ich endlich eine Lösung gefunden, mit calc(...) und max-width.

#parent {resize: both; border: 2px solid; overflow:auto; width: 500px; } 
 
#margin { max-width: 40px; width: calc(100% - 404px); display: inline-block; } 
 
#main { background-color: red; width: 400px; display: inline-block; }

<div id="parent"> 
 
<div id="margin">&nbsp;</div> 
 
<div id="main">&nbsp;</div> 
 
</div>

Quelle

2016-04-26 10:21:38 Basj

Auch ohne Leerzeichen von 4px und eine Umrandung anstelle der Grenze auf Eltern, plus eine '#main {max -breite: 400px; } 'es funktioniert nicht unter 400px: rotes element geht in einer zweiten linie. Ich schätze, weil calc() einen negativen berechneten Wert hat (wie 300px - 404px), aber ich kann falsch liegen. – FelipeAls

Hier ist eine Flexbox Lösung mit Demo-Fällen: http://codepen.io/anon/pen/
Relevante CSS sind:

.parent { 
    display: flex; 
} 
.margin { 
    min-width: 0; /* Necessary under 400px */ 
    max-width: 40px; 
    flex: 1 0 0; 
} 
.main { 
    width: 400px; 
}

Margin zu 40px aufzuwachsen erlaubt ist, sondern muss auch auf 0 gesetzt werden (flex sinking geht nie auf 0 runter. Ich denke, als Mindestbreite ist der Standardwert ... auto, nicht 0)

Quelle

2016-04-26 10:43:16 FelipeAls

Fügen Sie einen horizontalen Rand hinzu, wenn Platz verfügbar ist

Antwort

Verwandte Themen