Vous utilisez une marge en pourcentage en CSS mais souhaitez une marge minimale en pixels ?

Question

J'ai fixé un margin: 0 33% 0 0; mais je voudrais aussi m'assurer que la marge est au moins un certain px montant. Je sais qu'il n'y a pas min-margin en CSS, alors je me demandais si j'avais le choix ?

Answer 1

La véritable solution consiste à utiliser un point d'arrêt de media query pour déterminer quand 33 % ne vous convient plus et doit être remplacé par la marge minimale en pixels.

/*Margin by percentage:*/
div{
    margin: 0 33% 0 0;
}

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

Dans le code ci-dessus, changez le max-width à n'importe quelle largeur d'écran, la marge de droite de 33 % ne vous convient plus.

Answer 2

Placez un div avec un pourcentage width et un min-width à droite de votre élément.

<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">

Answer 3

Vous pouvez essayer ceci

.mm:before {
    content: "";
    display: inline-block;
    width: 33%;
    min-width: 200px;
}

Answer 4

Je sais que c'est un peu tard, mais avez-vous essayé ça ?

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

où 20px es tout ce que vous voulez doit être au moins un certain nombre de pixels . Ainsi, la marge restera fluide, mais ne tombera jamais en dessous de la limite. 20px .

J'espère que cela vous aidera !

Answer 5

Carl Papworth, dans ce cas, vous pouvez utiliser ceci :

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