Schwebende Elemente mit% -basierter Breite und px-basierten Grenzen: Was ist der beste Weg, um den Zeilenumbruch zu vermeiden?
Ich habe ein Problem, das mich unnachgiebig im Schlaf terrorisiert. Wenn Sie eine erreichbare Lösung haben und es teilen möchten, tun Sie es bitte; Ich würde gerne wieder eine normale Nacht schlafen.
Bei meinem letzten Projekt gibt es mehrere Male, wenn ich 4 oder 5 nebeneinander liegende Elemente haben muss. Jedes Element muss nach Prozentsätzen (%) sortiert sein, muss aber auch border-right: 1px solid #000 haben.
Früher habe ich normalerweise jedes Element mit Prozentsätzen dimensioniert und dann ein untergeordnetes Element erstellt, das alle Styling-Eigenschaften hätte, die das Elternteil wahrscheinlich hätte haben sollen, einschließlich border-right . Diese Lösung ist jedoch nicht ideal, da sie viel unnötiges Markup erfordert.
Ein Mitarbeiter hat mich dann zu einer anderen Lösung geführt. Wenn ein Element eine Breite hat, die mit% s skaliert wird und auch border-right: 1px solid #000 haben muss, wenden Sie margin-right: -1px als Offset an. Und während es funktioniert, hat es ein anderes Problem für mich geschaffen (weshalb wir hier sind, zusammen, in der Vereinigung).
Beim Herauszoomen in einem der wichtigsten Browser (ctrl mousescroll, ctrl -) tendieren die Floated-Elemente, die im Mittelpunkt der Diskussion standen, dazu, ein wenig zu tanzen; Das letzte Element schaltet zwischen der nächsten Zeile um und springt dann zurück. Bitte beachten Sie das Bild unten:
Der Grund, warum dies angegangen werden sollte, ist, dass der Umfang des Projekts das Potenzial hat, Menschen aus vielen verschiedenen demografischen Bereichen zu dienen (vor allem diejenigen, die einen Bildlauf durchführen müssen, um den Text größer oder kleiner zu machen). . Ein sehr breites Projekt in der Tat.
Wie erreiche ich mein im obigen Beispiel hervorgehobenes Ziel? Wie kann ich 4 oder 5 oder mehr (oder weniger) umrandete -Elemente haben, die nebeneinander liegen, proportional mit% s skaliert werden, OHNE dass sie brechen?
4 Antworten
Sie können die experimentelle Boxmodell-CSS3 -Deklaration verwenden, um die Ränder von der Grenze abzulenken Breite der Elemente, anstatt sie hinzuzufügen. Dies sollte das Problem verhindern. Quirksmode hat eine nette Beschreibung drauf. Es wird von IE8 / 9 und aktuellen Versionen von Webkit, Opera und ff unterstützt.
%Vor%Das Grundproblem hier, denke ich, ist, dass Sie die width -Eigenschaft "mißbrauchen" - die Breite soll innere Boxen steuern, nicht die Größe von äußeren Boxen. Das heißt, Ihre Grenzen sollen zu Ihren Boxen hinzugefügt werden, die nicht in der berechneten Breite enthalten sind.
Das Ergebnis ist, dass Sie nicht viele Möglichkeiten jenseits von beiden haben:
- Verwenden Sie Javascript, um etwas Phantasie neu zu berechnen,
- Sehen Sie, ob Sie den Quirks-Modus auslösen und das IE5-Box-Modell verwenden können (keine gute Idee),
- Ersetzen von Rahmen mehrere Hintergrundbilder in vielen gestapelten divs (nicht nett) oder
- Schwebende Container mit einer Breite von 20% und dann Breite: auto divs ( nicht width: 100%) mit Rahmen in die übergeordneten Floats.
Ich weiß, dass Lösung 4 schrecklich klingt und nicht-semantisches Markup bedeutet, aber es ist ein üblicher Kludon, den andere Entwickler wahrscheinlich (zu) gut verstehen werden.
Wenn Sie die Randbreite und den negativen Rand in ems anstelle von Pixeln deklarieren, gibt es kein Wrapping / Jumping. Ich erkenne, dass dies ein kalter Komfort sein kann, da es dein Design etwas kompromittieren würde, aber es funktioniert!
Tags und Links css