webentwicklung-frage-antwort-db.com.de

Wie mache ich ein Div eine feste Größe?

Ich habe eine Site erstellt, so dass, wenn Sie auf die Schaltfläche 30px klicken, die Schriftart innerhalb der div geändert wird.

Ich habe eine ul darin mit den Bottons. Wenn ich die Schriftgröße ändere, vergrößert sich die Variable div und die Navigationsschaltflächen bewegen sich ebenfalls mit.

Wie mache ich es, damit es fixiert bleibt, aber die Schriftarten können sich noch ändern.

35
Mike Collins

Versuchen Sie folgendes CSS:

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

Dadurch nimmt das div so wenig Platz wie möglich ein und seine Breite wird durch das CSS definiert. 

// Erweiterte Antwort

Gehen Sie folgendermaßen vor, um den Schaltflächen feste Breiten zu geben:

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

Sie sollten jedoch wissen, dass sich mit der Größe des Texts auch der Platz ändert, der für die Anzeige benötigt wird. Daher ist es natürlich, dass die Container erweitert werden müssen. Sie sollten vielleicht überprüfen, was Sie zu tun versuchen. Vielleicht haben Sie auch vordefinierte Klassen, die Sie mithilfe von Javascript sofort ändern, um sicherzustellen, dass die Inhaltsplatzierung perfekt ist.

49
Kami

sie können ihm eine maximale Höhe und Breite in Ihrer .css geben

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

zusätzlich zu Ihren Eigenschaften in Höhe und Breite

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

Das ist das natürliche Verhalten der Knöpfe. Sie könnten versuchen, dem übergeordneten Container eine maximale Breite/maximale Höhe hinzuzufügen, aber ich bin nicht sicher, ob dies der Fall wäre.

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

Die andere Option wäre, die devlopr-Werkzeuge zu verwenden und herauszufinden, ob Sie die natürliche Polsterung entfernen können.

padding: 0;
0
Matt Steele