Ich versuche, dieses Layout mit zwei 50% Spaltenbreite zu verwenden. Aber wenn die rechte Spalte ihre "minimale Breite" erreicht, geht sie unter die linke Spalte. Gibt es eine Möglichkeit, die "Shim" -Technik zu verwenden, um eine Mindestbreite für den Wrapper festzulegen, sodass beide Größen nicht mehr skalieren. Somit wird das Problem beseitigt, dass sich die rechte Spalte in der linken Spalte befindet.
Meine Seite ist wie folgt.
%Vor%Das Problem dabei ist, dass die Größe der linken Spalte nicht mehr geändert wird, aber die rechte Spalte wird unter die linke Spalte verschoben und die Größe wird beibehalten. Im Grunde ist der Effekt, den ich will, sobald die Breite der Wrapper unten geht, dass sowohl die linke als auch die rechte Spalte die Größenänderung abbricht. Putting die Shim in beiden linken und rechten Spalten hat auch nicht funktioniert.
Gibt es möglicherweise einen anderen Weg, um zwei Spalten mit 50% Breite zu erhalten und eine Unterlegscheibe zu verwenden, um eine Mindestbreite richtig einzustellen?
Danke.
Edit: Der Whitespace in der Minwidth-Klasse ist tatsächlich & amp; nbsp, aber es wurde konvertiert. ;)
Ich konnte eine "no HTML tables required" -Lösung entwickeln, basierend auf einer Technik von Stu Nicholls bei CSS Play und ich persönlich mag es, weil es nicht nur in IE6 + und FF2 + funktioniert, sondern auch in CSS das erfordert keine Hacks. Für mein Argument, warum ein CSS-basiertes Layout gegenüber HTML-Tabellen vorzuziehen ist, siehe unten.
Erstens empfehle ich, beim Erstellen neuer Seiten mit CSS den standardkonformen Browsermodus zu verwenden. Eine Erklärung zum quirksmode- und standardkonformen Modus finden Sie in diesem Artikel auf einer meiner bevorzugten CSS-Ressourcen-Websites. Sie müssen lediglich ein bestimmtes DOCTYPE-Element oben auf Ihren Seiten hinzufügen. Das CSS wird dann gezwungen, im standardkonformen Modus zu rendern, was zu weniger Fehlern und Browser-Idiosynkrasien führt. Für den Fall, dass Sie nicht in den standardkonformen Modus wechseln können, gibt es eine Min-Width-Lösung für Browser in quirksmode, die auch bei CSS Play verfügbar ist.
Zweitens müssen Sie einen zusätzlichen Wrapper um Ihr vorhandenes Markup hinzufügen. Dieser Wrapper wird verwendet, um die Mindestbreite für Browser festzulegen, die Min-width (nicht IE) verstehen. Sie können dann den * html-Trick verwenden, um gezielt IE 6 anzusprechen und Stu Nicholls Technik auf die inneren Wrapper anzuwenden. Die Technik wird hier ausführlich beschrieben und das spezifische verwendete Beispiel ist "# 2 für standardkonformen Modus IE":
Das Endergebnis ist ziemlich einfach. Es erstellt 2 50% -Spalten unter Verwendung der 2-Spalten-ALA-Stil -Technik, die in der ursprünglichen Frage erwähnt wurde, die eine Gesamtpunktzahl haben Mindestbreite (in diesem Beispiel 500 px), bei der die Größenänderung der Spalten nicht mehr angezeigt wird und die rechte Spalte nicht unter die linke Spalte fällt. Ich hoffe, das hilft!
Bearbeiten: Dieselbe Technik kann verwendet werden, um Cross-Browser-kompatible Mindestbreite auf alles anzuwenden. Zum Beispiel müssen die Spalten nicht jeweils 50% sein und eine beliebige Anzahl von Spalten kann verwendet werden. Ссылка ist eine großartige Ressource für CSS-basierte Seitenlayouts und in Kombination mit dieser minimalen Breite gibt es viele schöne Layouts, die das können mit minimalen, gültigen CSS erstellt werden.
%Vor%Mein Anreiz zum Einrichten eines Stack Overflow-Kontos bestand nun darin, auf den folgenden Vorschlag zu antworten: "Wenn Sie zwei Spalten haben möchten, verwenden Sie eine Tabelle, anstatt Divs zu zwingen, sich wie eine Tabelle zu verhalten." Da ich zu neu bin, um entweder zu kommentieren oder abzulehnen, erweitere ich diese Diskussion.
Wirklich?
Jemand stellt eine Frage zu CSS-basierten Layouts und Sie antworten, indem Sie ihnen sagen, HTML-Tabellen zu verwenden?
Lassen Sie mich zunächst sagen, dass ich nicht glaube, dass HTML-Tabellen völlig unnötig sind. Wann immer ich tabellarische Daten anzeigen muss, d. relationale Daten verwende ich eine HTML-Tabelle. Die Anzeigeeigenschaften von CSS-Tabellen werden noch nicht vollständig unterstützt (in Kürze in IE8!) Und eine einzeilige HTML-Tabelle ist eine effektive Lösung. Sehen Sie sich das Markup für eine der Webseiten von Google an und Sie werden sehen, dass sie einverstanden sind.
Als jemand, der viel Zeit damit verbracht hat, CSS-basierte Layouts zu schreiben, die browserübergreifend kompatibel sind, wenn sie es in zehn Minuten mithilfe einer Tabelle hätten tun können, stimme ich zu, dass es eine einfachere Lösung für dieses Problem gibt. Aber nur weil Sie Dynamit verwenden können, um Ihre Küche zu renovieren, heißt das nicht, dass Sie es sollten. Der folgende Artikel bietet eine detaillierte Erklärung dafür, warum CSS-basierte Layouts wünschenswerter sind.
Hier ist ein gutes Beispiel für das, was Sie sich wünschen, denke ich.
Kurz gesagt, hier ist das CSS:
%Vor%Hier ist der html:
%Vor%Nun, ich möchte mich nicht auf ein politisches Argument beschränken, aber die Argumentation in dem zitierten Artikel von Agoudzward über "warum CSS besser ist als Tabellen" hat wenig mit Tabellen zu tun. Was es demonstriert, ist, dass CSS besser ist als einzelne Schift-Tags und Farbeinstellungen und dergleichen immer und immer wieder zu verwenden, wenn viele Seitenelemente nach demselben Stil verlangen. Ja, ich stimme absolut zu, dass wenn Sie hundert Elemente auf einer Seite haben, die alle grün sein sollten, 14pt, Arial-Text, dann ist es sehr sinnvoll, einen CSS-Stil dafür zu erstellen, anstatt ein Font-Tag immer wieder zu kopieren und einzufügen aus all den Gründen, die sie geben. Das geht doppelt, wenn Sie denselben Stil auf mehreren Seiten haben möchten.
Aber was hat das mit Tabellen zu tun?
Die Argumentation scheint zu sein: "CSS ist gut, weil es Ihnen erlaubt, Schriftart und Farbe einmal anstatt wiederholt zu spezifizieren, daher ist alles, was mit CSS getan werden kann, besser als jede mögliche Alternative". Nun, das folgt gar nicht! Nur weil ein Werkzeug für eine Art von Problem gut ist, bedeutet es nicht, dass es für alle möglichen Probleme gut ist. Hammer eignet sich hervorragend zum Einsetzen von Nägeln. Das bedeutet nicht, dass ich sie zum Schrauben benutze. Wenn ich ein Layout einfacher und logischer mit Tabellen als mit divs und CSS-Tags machen kann, dann muss ich darauf bestehen, dass ich trotzdem CSS verwenden sollte, weil "CSS ist gut" sagt: Na und?
Verwenden Sie eine 2-Spalten-Tabelle. Es wird genau das tun, was Sie wollen. Divs sollen verwendet werden, um logisch unterschiedliche Blöcke aufzuteilen, und Tabellen sind dazu da, um columned Daten auszulegen. Wenn Sie zwei Spalten haben möchten, verwenden Sie eine Tabelle, anstatt Divs zu zwingen, sich wie eine Tabelle zu verhalten.
Tags und Links internet-explorer css layout