CSS - auto-Breite Schwebekörper (erweiterbar float)

Habe ich zwei trieben collumns nebeneinander. Kann der Benutzer verbergen/reduzieren der collumns. In diesem Fall möchte ich die anderen collumn zu erweitern, dass der gesamte container.

Ist das möglich mit CSS?

Im Lebenslauf, ist es möglich, einen float zu erweitern, um die Größe der container?
Auch wenn das element schwebte, wenn es über width:auto sollte es erweitern. Mindestens das ist, so denke ich sollte es funktionieren.

  • können Sie uns ein Beispiel des Codes, wie Sie ausblenden ein - /ausblenden-Spalte?
  • Es ist unwahrscheinlich, dass dies möglich ist, in reinem CSS (damit sind die Spalten reagieren auf user-events), aber sicherlich ist es machbar, mit js/jQuery.
  • Haben Sie sich Gedanken über die Verwendung einer JavaScript-Bibliothek wie jQuery? Es könnte sich ändern, das CSS-styling der Spalten auf die Fliegen, ohne ins Schwitzen zu geraten. [Edit bemerkt.. anderen, ähnlichen Kommentar Hinzugefügt, nachdem ich die Seite aktualisiert - ach, große Geister... ;p]
  • irgendeine chance, dass Sie könnte sich ändern, die akzeptierte Antwort auf diese Frage? (Du bist der einzige, der dies tun können.)
InformationsquelleAutor brpaz | 2010-08-11
  1. -3

    Wenn Ihr die linke Spalte hat eine implizite Größe, sagen 250px und die Rechte Spalte ist NUR schwebte mit keine Größe festlegen, dann sollte es füllen Sie den Behälter, wenn die linke Spalte ausgeblendet ist. Code wäre wie folgt:

    #leftcol{
width:250px;
float:left;
clear:none;
}

#rightcol{
float:left;
overflow:hidden;
width:auto; /* This may or may not work */
}
    InformationsquelleAutor SimonDowdles
  2. 34

    Nup, ich glaube nicht, dass die akzeptierte Antwort tatsächlich funktioniert. Ich war gerade versucht, die gleiche Sache, und das ist die Lösung...

    .left { 
    float: left;
}
.right {
    overflow: hidden;
    /* don't float this one */
}

    Spielen, um mit dem code hier: http://jsfiddle.net/simoneast/qPHgR/2/

    • Dies ist eine meist gute Abhilfe. Aber was nicht mag, ist, wie die ".Recht" container überläuft, setzen Sie die Bildlaufleisten auf dem container anstelle des Fensters. Es ist bedauerlich.
    • Sorry Josef, aber overflow: hidden sollten niemals Scrollbalken auf das element. Und es wird auto-expand in Breite und Höhe, so sollte die Anzeige alle Ihre Inhalte, es sei denn, es ist größer als die Spalte selbst (zB. ein Bild oder eine Feste Größe-element). Sind Sie sicher, dass Sie nicht setzen zusätzliche CSS-in, als das, was hier ist?
    • Simon, du hast Recht. Wenn .right oder irgendwas in der .right will zumindest eine gewisse Breite, dann overflow: hidden können abhacken der Inhalt, wenn das Fenster zu klein ist. In meinen Tests, die ich Hinzugefügt overflow-x: auto; die Ursachen Bildlaufleisten angezeigt werden, in diesem Fall.
    • Ich kann nicht umbrochen, mein Gehirn um diese! Warum funktioniert das?
    • Ja, es ist ein bisschen verwirrend. Ohne overflow:hidden den Inhalt in .right umwickeln und unter .left. Aber overflow:hidden scheint haben spezielle Eigenschaften, in denen es Dinge wie das erweitern einer box enthalten alle gefloateten Elemente darin und auch passen Sie die Größe einer box-Konto auch für andere Schwimmer. Ich bin mir nicht ganz sicher, warum - die technischen Gründe dafür sind vermutlich begraben in der CSS-spec irgendwo, wie alle modernen Browser zu haben scheinen, dieses Verhalten.
    InformationsquelleAutor Simon East
  3. 2

    set overflow:auto; height:auto; für das element floatet
    🙂

    InformationsquelleAutor FARHAD AFSAR
Schreibe einen Kommentar