Wie man ein div-Element eine Feste Größe haben?

Machte ich eine Website, so dass, wenn Sie klicken Sie auf die Schaltfläche 30px es änderungen der schriftart in das div.

Ich habe eine ul darin, mit den Buttons. Wenn ich ändern Sie die Größe der schriftart, die div erweitert und der nav-Tasten bewegen Sie mit es als gut.

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

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

    Versuchen den folgenden css:

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

    Das macht das div nehmen möglichst wenig Platz ein, und seine Breite ist definiert durch die css.

    //Erweiterte Antwort

    Stellen die buttons eine Feste Breite, tun Sie Folgendes :

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

    Allerdings sollten Sie sich bewusst sein, dass, wie die Größe des Textes ändert sich auch der benötigte Platz, um es anzuzeigen. Als solche, es ist natürlich, dass die Container nach Bedarf zu erweitern. Sollten Sie vielleicht überprüfen, was Sie zu tun versuchen, und vielleicht haben einige vordefinierte Klassen, die Sie ändern on-the-fly mithilfe von javascript, um sicherzustellen, dass der Inhalt Platzierung ist perfekt.

    • Dies war für die div, die änderungen der schriftart, aber jetzt meine blöde Tasten schwimmt noch :S
    • Ich erweiterte meine Antwort. Ändern der Größe des Textes, wird der text fließen von den Tasten, wenn Sie eine Feste Breite - bei einigen Browsern kann es immer noch erweitern. Ich denke, Sie müssen Ihre Strategie zu überdenken, was Sie versuchen zu erreichen.
    • ok, aber wenn ich nicht weiß, welche Breite ich will? Ich will bleiben fix Breite nach dem ersten Rendern
    • das sprengt den Rahmen der ursprünglichen Frage. Öffnen Sie bitte eine neue Frage, als was Sie anstreben zu tun ist, unterscheidet sich von der OP.
    InformationsquelleAutor Kami
  2. 1

    können Sie einen max-height und max-width in Ihr .css

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

    zusätzlich zu Ihrer Höhe und Breite Eigenschaften

    • Okay also es funktioniert jetzt aber die Tasten bewegen sich alle über gibt es einen Weg, um Sie bleiben an Ihrem Ort?
    InformationsquelleAutor Mike
  3. 0

    Das ist das Natürliche Verhalten der Tasten. Sie könnten versuchen, indem eine max-width/max-height auf den übergeordneten container, aber ich bin mir nicht sicher, ob dieser es tun würde.

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

    Die andere option wäre, die Nutzung devlopr tools und sehen Sie, wenn Sie entfernen die Natürliche Polsterung.

    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. -2
    <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>
    • Versuchen Sie zu erklären, Ihre Lösung.
    InformationsquelleAutor Korkut Hacı
  6. -3

    Verwenden Sie diesen Stil

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