web-dev-qa-db-fra.com

Comment faire en sorte qu'une div ait une taille fixe?

J'ai créé un site afin que lorsque vous cliquez sur le bouton 30px, il change la police à l'intérieur de la div.

J'ai une ul dedans avec les boutons. Lorsque je change la taille de la police, la variable div se développe et les boutons de navigation se déplacent également.

Comment puis-je le faire pour qu'il reste fixe, mais les polices peuvent toujours changer.

csshtmlfixed
35
Mike Collins

Essayez le css suivant:

#innerbox
{
   width:250px; /* or whatever width you want. */
   max-width:250px; /* or whatever width you want. */
   display: inline-block;
}

Cela fait que la div utilise le moins d’espace possible, et sa largeur est définie par le css. 

// réponse élargie

Pour que les boutons aient des largeurs fixes, procédez comme suit:

#innerbox input
{
   width:150px; /* or whatever width you want. */
   max-width:150px; /* or whatever width you want. */
}

Toutefois, vous devez savoir que la taille du texte change tout comme l’espace nécessaire pour l’afficher. En tant que tel, il est naturel que les conteneurs doivent être agrandis. Vous devriez peut-être revoir ce que vous essayez de faire; et peut-être avez-vous des classes prédéfinies que vous modifiez à la volée en utilisant javascript pour vous assurer que l'emplacement du contenu est parfait.

49
Kami

vous pouvez lui donner une hauteur maximale et une largeur maximale dans votre fichier .css

.fontpixel{max-width:200px; max-height:200px;}

en plus de vos propriétés de hauteur et de largeur

1
Mike
<div>
  <img src="whatever it is" class="image-crop">
</div>

 /*mobile code*/
    .image-crop{
      width:100%;
      max-height: auto;
     }
    /*desktop code*/

  @media screen and (min-width: 640px) {
    .image-crop{
       width:100%;
       max-height: 140px;
      }
0
Shailesh kala

C'est le comportement naturel des boutons. Vous pouvez essayer de définir une largeur maximale/une hauteur maximale sur le conteneur parent, mais je ne suis pas sûr que cela suffirait.

max-width:something px;
max-height:something px;

L'autre option serait d'utiliser les outils devlopr et de voir si vous pouvez supprimer le remplissage naturel.

padding: 0;
0
Matt Steele