Einstellung der div-Breite auf 100% abzüglich einer bestimmten px-Menge
Ich habe die letzten Stunden im Internet gesucht, um eine Lösung dafür zu finden, aber ich konnte es nicht finden, also bin ich hier.
Ich brauche die Breite von div als 100% minus die Breite von left div .
Damit das div links davon die gleiche Breite (390 px) hat, passt das andere div seine Größe in Abhängigkeit von der Auflösung an. Ich habe die Lösung gefunden, wo es eine feste Breite div auf beiden Seiten hat, aber kann es nicht herausfinden.
5 Antworten
Diese Art der Berechnung wird derzeit in CSS nicht unterstützt (sicherlich nicht in Chromium 12 / Ubuntu 11.04), aber in CSS 3 ist eine calc() -Funktion definiert, die diese Art von Verhalten mit einfachen mathematischen Methoden ermöglicht Funktionen:
(Das obige Beispiel stammt direkt aus dem W3.org .)
Meine eigenen (erschöpfenden) Tests zeigen:
%Vor% Die obigen Ergebnisse wurden mit den genannten Browsern und einer css calc() -Demo erzielt, deren Code unten steht:
HTML:
%Vor%CSS:
%Vor%(Wenn jemand den obigen Test in den Browsern auf seiner Plattform ausführen und die Ergebnisse bereitstellen oder in dieser Antwort bearbeiten möchte, wäre das viel geschätzt.)
Wie bereits erwähnt, clairesuzy , in Kommentaren:
[Take] ein Blick auf caniuse funktioniert es in Firefox wenn Sie
width: -moz-calc()verwenden, aber das ist darüber;)
Und in der Tat, in Firefox 5 (Ubuntu 11.04) funktioniert es (die anderen Hersteller-Präfixe scheinen jedoch nichts für Opera oder Webkit zu tun; leider): Überarbeitete, vom Hersteller vorgestellte Demo .
Referenz:
verschiebe das linke div und mache einen neuen Blockformatierungskontext aus dem rechten div (Überlauf: versteckt ist eine Möglichkeit, dies zu tun), auf diese Weise wird der verbleibende Platz benötigt
Beispiel Fiddle
Es gibt wirklich keine Möglichkeit, dies mit geradlinigem CSS in Browsern anderer FireFox zu tun (siehe die MDN-Dokumente ). Sie könnten Javascript verwenden, um das gleiche zu tun, aber ich würde vorschlagen, Ihr Layout zu überdenken.
EDIT: eigentlich kann IE 9 auch damit umgehen, siehe MSDN-Dokumentation . Yay für IE?
Vielleicht hängt das nicht direkt mit der Frage zusammen, aber ich hatte ein ähnliches Problem, um Elemente in einer Liste anzuordnen. Das Element mit fester Breite befindet sich rechts von jedem Element. Ich habe es geschafft, dies mit dem folgenden Ansatz zu lösen. Die Idee ist, ein positives padding-left mit einem negativen margin-left auszugleichen, während die Breite auf 100% gesetzt wird: