Verwenden eines prozentualen Seitenrandes in CSS, aber einen Mindestrandabstand in Pixeln wünschen?

Question

Ich habe einen margin: 0 33% 0 0; festgelegt, aber ich möchte auch sicherstellen, dass der Abstand mindestens einen bestimmten Wert in px beträgt. Ich weiß, dass es kein min-margin in CSS gibt, also frage ich mich, ob ich hier Optionen habe?

Answer 1

Die wahre Lösung besteht darin, einen Medienabfrage-Breakpoint zu verwenden, um zu bestimmen, wann 33 % nicht mehr für Sie funktioniert und durch den minimalen Abstand in Pixel überschrieben werden sollte.

/*Margin in Prozent:*/
div{
    margin: 0 33% 0 0;
}

/*Margin in Pixel:*/
@media screen and (max-width: 200px){
    div{
        margin: 0 15px 0 0;
    }
}

In dem obigen Code ändern Sie die max-width auf die Bildschirmbreite, bei der der 33% rechte Rand nicht mehr für Sie funktioniert.

Answer 2

Platzieren Sie ein div mit einer % width und einer festen min-width rechts von Ihrem Element.

Answer 3

Du kannst das versuchen

.mm:before {
    Inhalt: "";
    Anzeige: inline-block;
    Breite: 33%;
    min-Breite: 200px;
}

Answer 4

Ich weiß, es ist spät im Spiel, aber hast du das schon versucht?

margin: 0 max(33%, 20px) 0 0

wo 20px ist was auch immer du möchtest, dass es mindestens eine bestimmte Anzahl von Pixeln ist. Also der Rand wird fließend bleiben, aber niemals unter 20px fallen.

Hoffe, es hilft!

Answer 5

Carl Papworth, in diesem Fall kannst du das hier verwenden:

body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}