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

Question

J'ai créé un site pour que lorsque l'on clique sur le bouton de 30px, la police de caractères soit modifiée à l'intérieur de l'image. div .

J'ai un ul à l'intérieur avec les fonds. Lorsque je change la taille de la police, les div s'agrandit et les boutons de navigation se déplacent également.

Comment faire pour qu'il reste fixe mais que les polices puissent encore changer.

Answer 1

Essayez le code suivant :

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

Cela permet à la div de prendre le moins de place possible, et sa largeur est définie par le code CSS.

// Réponse élargie

Pour que les boutons aient une largeur fixe, procédez comme suit :

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

Cependant, il faut savoir que la taille du texte change et que l'espace nécessaire pour l'afficher change également. Il est donc naturel que les conteneurs soient agrandis. Vous devriez peut-être revoir ce que vous essayez de faire ; et peut-être avoir quelques classes prédéfinies que vous modifiez à la volée à l'aide de javascript pour vous assurer que le placement du contenu est parfait.

Answer 2

Vous pouvez lui donner un max-height et un max-width dans votre .css

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

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

Answer 3

C'est le comportement naturel des boutons. Vous pourriez essayer de mettre un max-width/max-height sur le conteneur parent, mais je ne suis pas sûr que cela suffise.

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 rembourrage naturel.

padding: 0;

Answer 4

<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;
      }

Answer 5

Utiliser ce style

<div class="form-control"
     style="height:100px;
     width:55%;
     overflow:hidden;
     cursor:pointer">
</div>