Jak sprawić, by div miał stały rozmiar?

Zrobiłem stronę, więc po kliknięciu przycisku 30px zmienia się czcionka wewnątrz div.

Mam ul w środku z dnami. Kiedy zmieniam rozmiar czcionki div rozszerza się i przyciski nav poruszają się wraz z nią.

Jak to zrobić, aby zostało naprawione, ale czcionki nadal mogą się zmieniać.

Author: Marcus Recck, 2013-01-25
Source

6 answers

Wypróbuj następujący css: 

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

To sprawia, że div zajmuje jak najmniej miejsca, a jego szerokość jest określona przez css.

/ / rozwinięta odpowiedź

Aby przyciski o stałej szerokości wykonały następujące czynności: 

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

Należy jednak pamiętać, że wraz ze zmianą rozmiaru tekstu zmienia się również przestrzeń potrzebna do jego wyświetlenia. W związku z tym naturalne jest, że pojemniki muszą się rozszerzać. Być może powinieneś przejrzeć to, co próbujesz zrobić; a może masz trochę predefiniowane klasy, które zmieniasz w locie za pomocą javascript, aby zapewnić idealne rozmieszczenie treści.

 65
Author: Kami,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-29 16:39:26

Możesz dać mu max-wysokość i max-szerokość w swoim .css 

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

Oprócz właściwości wysokości i szerokości

 1
Author: Mike,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-25 16:33:22

To naturalne zachowanie przycisków. Możesz spróbować umieścić max-width/max-height na kontenerze macierzystym, ale nie jestem pewien, czy to wystarczy.

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

Inną opcją byłoby użycie narzędzi devlopr i sprawdzenie, czy można usunąć naturalne wypełnienie.

padding: 0;
 0
Author: Matt Steele,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-25 16:33:31 
<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;
      }
 -1
Author: Shailesh kala,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-23 07:48:30

Użyj tego stylu 

<div class="form-control"
     style="height:100px;
     width:55%;
     overflow:hidden;
     cursor:pointer">
</div>
 -3
Author: Bharath Kumar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-21 15:49:17 
<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>
 -3
Author: Korkut Hacı,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-02 23:36:03