web-dev-qa-db-fra.com

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

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

cssmargin
34
Brett

Placez une div avec une% width et un min-width statique à la droite de votre élément.

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

La vraie solution consiste à utiliser un seuil d’interrogation de média pour déterminer quand 33% ne fonctionne plus pour vous 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, remplacez le max-width par la largeur d’écran que la marge de droite 33% ne fonctionne plus pour vous.

28
Clarus Dignus

tu peux essayer ça

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

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

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

Que dis-tu de ça?

body {margin-left: 60px; margin-right: 60px; }
div#container {width:33%;}
1
GlennFriesen

J'ai joué avec quelques-unes des solutions susmentionnées, mais dans un environnement fluide et réellement réactif, la meilleure option consiste à définir le remplissage approprié sur le conteneur/emballage respectif. Exemple: Style:

 html {
   background-color: #fff;
   padding: 0 4em;
 }
 body {
   margin: 0 auto;
   max-width: 42em;
   background-color: #ddf;
 }

Jouez maintenant avec différentes largeurs de fenêtre et essayez également différentes tailles de police.

Essayez également la démo de travail .

0
untill

Vous pouvez conserver vos éléments dans un "conteneur" et définir un remplissage exact pour "marge minimale" que vous souhaitez utiliser. Ce n'est peut-être pas exactement ce que vous recherchez, mais cela vous donne l'impression d'une marge minimale.

<div class="container">
   <div class="your_div_with_items">
   'items'
   </div>
</div>

Puis le CSS:

.container
{
   padding: 0 'min_margin_ammount' 0 0;
}

.your_div_with_items
{
   margin: 0 33% 0 0;
}
0
lmigas

Autant que je sache, vous pouvez placer une div autour de votre élément, qui définit un padding. Un rembourrage d'un élément externe est semblable à la marge d'un élément interne.

Imaginez que vous vouliez au moins une marge de 1px:

<div style="padding:1px">
  <div style="margin: 0 33% 0 0;">
      interesting content
  </div>
</div>

edit: c'est comme la réponse d'Imigas, mais je pense plus facile à comprendre. 

0
TheTrowser

si vous utilisez span que vous devez faire comme ceci: 

span{
display:block;
margin:auto;
}

démo de travail

si vous utilisez div que vous ne pouvez le faire:

div{
  margin:auto;
}
0
Phoenix

Il est également possible de tester si un certain pourcentage de la largeur/hauteur de l'écran est inférieur à une longueur en pixels.

Voici une solution simple pour utiliser JavaScript:

<body>
 <div id="demo">
  <p> Hello World! </p>
 </div>

 <script>
  if (((window.innerWidth / 100) * 33) < 250) { /* Gets 33% of window width in pixels, tests if it is less than required minimum length (250px) */
  document.getElementById("demo").style.margin = "0 250px 0 0" /* If true, set margin to length in pixels */
  } else {
   document.getElementById("demo").style.margin = "0 33% 0 0" /* If not true, the Widow is big enough and percentage length is set */
   }
 </script>
</body>
0
Quijibo