Comment faire un div ont une taille fixe?

J'ai fait un site, donc lorsque vous cliquez sur le bouton 30px il modifie la police à l'intérieur de la div.

J'ai un ul à l'intérieur avec les boutons. Lorsque je change la taille de la police, le div se dilate et la valeur liquidative boutons déplacer avec elle ainsi.

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

InformationsquelleAutor Mike Collins | 2013-01-25
  1. 52

    Essayer le code css suivant:

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

    Ce qui rend la div prendre comme peu d'espace que possible, et sa largeur est définie par la css.

    //Étendu réponse

    Pour rendre les boutons des largeurs fixes procédez de la manière suivante :

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

    Cependant, vous devez être conscient que, plus la taille du texte des modifications de l'espace nécessaire pour l'afficher. En tant que tel, il est naturel que les conteneurs ont besoin pour se développer. Vous devriez peut-être revoir ce que vous essayez de le faire; et peut-être avoir certaines classes prédéfinies que vous le modifier à la volée à l'aide de javascript afin de s'assurer que le contenu de placement est parfait.

    • Il a travaillé pour la div qui modifie la police, mais maintenant mon stupide boutons sont encore flottant :S
    • J'ai élargi ma réponse. Modifier la taille du texte sera de faire couler le texte de l'boutons si ils sont de largeur fixe - certains navigateurs peuvent encore développer. Je pense que vous devez repenser votre stratégie de ce que vous essayez d'atteindre.
    • ok, mais si je ne sais pas de quelle largeur je veux? Je veux rester fixer la largeur après le premier rendu
    • c'est-à-delà de la portée de la question d'origine. Veuillez ouvrir une nouvelle question que de ce que vous cherchez à ne diffère de l'OP.
    InformationsquelleAutor Kami
  2. 1

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

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

    en plus de vos propriétés height et width

    • Ok, donc ça fonctionne, mais maintenant les boutons déplacer partout dans est-il un moyen pour qu'il reste dans son coin?
    InformationsquelleAutor Mike
  3. 0

    C'est le comportement naturel de ces boutons. Vous pourriez essayer de mettre un max-width/max-height sur le conteneur parent, mais je ne sais pas si ce serait le faire.

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

    L'autre option serait d'utiliser la devlopr outils et voir si vous pouvez enlever le rembourrage naturel.

    padding: 0;
    InformationsquelleAutor Matt Steele
  4. -1
    <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;
      }
    InformationsquelleAutor Shailesh kala
  5. -1
    <div class="ai">a b c d e f</div>
<div class="ai">a b c d e</div>
<div class="ai">a b c d</div>

<script>
function _w(a) {
var _maxw = 0;
    $(a).each(function(){
    var _w = $(this).width();
    _maxw = (_w >= _maxw) ? _w : _maxw;
    });
$(a).width(_maxw);
}
_w('.ai');</script>
    • Essayez d'expliquer votre solution.
    InformationsquelleAutor Korkut Hacı
  6. -3

    Utiliser ce style

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