Hoe maak je een div een vaste grootte?

Ik heb een site gemaakt zodat wanneer je op de knop 30px klikt, het lettertype in de divverandert.

Ik heb een ulerin met de bottons. Als ik de grootte van het lettertype verander, wordt de divgroter en bewegen de navigatieknoppen mee.

Hoe zorg ik ervoor dat het vast blijft staan, maar de lettertypen nog kunnen veranderen.

Antwoord 1, autoriteit 100%

Probeer de volgende css:

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

Hierdoor neemt de div zo min mogelijk ruimte in beslag, en de breedte wordt bepaald door de css.

// Uitgebreid antwoord

Om de knoppen een vaste breedte te geven, doet u het volgende:

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

U moet er echter rekening mee houden dat naarmate de grootte van de tekst verandert, ook de ruimte die nodig is om deze weer te geven verandert. Als zodanig is het logisch dat de containers moeten uitzetten. Je zou misschien moeten bekijken wat je probeert te doen; en misschien heb je een aantal vooraf gedefinieerde klassen die je direct kunt wijzigen met javascript om ervoor te zorgen dat de plaatsing van de inhoud perfect is.

Antwoord 2

je kunt het een max-height en max-width geven in je .css

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

naast uw eigenschappen voor hoogte en breedte

Antwoord 3

Dat is het natuurlijke gedrag van de knoppen. Je zou kunnen proberen om een ​​max-width/max-height op de bovenliggende container te zetten, maar ik weet niet zeker of dat voldoende is.

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

De andere optie zou zijn om de devlopr-tools te gebruiken en te kijken of je de natuurlijke opvulling kunt verwijderen.

padding: 0;

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

Antwoord 5

Gebruik deze stijl

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

Antwoord 6

<div class="ai">a b c d e f</div> // something like ~100px
<div class="ai">a b c d e</div> // ~80
<div class="ai">a b c d</div> // ~60 
<script>
function _reWidthAll_div(classname) {
var _maxwidth = 0;
    $(classname).each(function(){
    var _width = $(this).width();
    _maxwidth = (_width >= _maxwidth) ? _width : _maxwidth; // define max width
    });    
$(classname).width(_maxwidth); // return all div same width
}
_reWidthAll_div('.ai');
</script>