Was ist der Mechanismus, der aus verschiedenen Abschnitten auf Seite hält neu positioniert wird, wenn Browser

Question

In dieser Website ändert die Größe, wenn Sie das Browser-Fenster den weißen Raum auf der linken Seite schrumpfen und verschwinden gleich beim ersten, durch das Schrumpfen der rechten Seite folgt, gefolgt durch die Hauptbehälterverkleidung. Ich habe vor kurzem begonnen, ASP.NET MVC zu verwenden, und in meinem Testfall fallen meine Container unter die anderen Container, wenn ich die Größe des Browserfensters ändere. Ich benutze eine Site.master Seite mit einem linken, mittleren und rechten Teil als Teil des Körpers. Gibt es dort ein Attribut in CSS, das das Verhalten oder ein HTML-Element diktiert? Ich habe die Seitenquelle der Hauptseite dieser Seite angesehen und das CSS angeschaut, aber nichts Offensichtliches ist auf mich übergesprungen, wie dies kontrolliert wird.

Answer 1

Eines der großen Dinge über Web-Entwicklung ist, dass am häufigsten, wenn Sie eine Website sehen und denken "Wie haben sie das gemacht", es ist sehr einfach, den Code zu sehen und herauszufinden, und auch um es zu testen - Tools wie Firebug für Firefox, die Entwicklertools in IE 8 (F12) und Chrome zeigen alle schön formatierte Quellen und CSS an und lassen Sie sie in situ ändern.

Im Fall von SO, ist der Hauptkörper des Standortes in einem div mit der Klasse von „Container“ enthalten ist, sind die Stilregeln für „Container“:

.container { 
    margin: 0 auto; 
    text-align: left; 
    width: 950px; 
} 

Der Schlüssel, was wir sind hier sehen ist, dass diese Klasse eine feste Breite - 950 Pixel, und die Ränder sind auf (erweitert):

margin-top: 0px; 
margin-right: auto; 
margin-bottom: 0px; 
margin-left: auto; 

Einstellung der linken und rechten Rand auf „auto“ hat sich die Auswirkungen auf die Zentrierung div innerhalb der Ränder des Containers, und erlaubt ihnen auf die Breite zu erweitern, die benötigt wird, sobald der Behälter die erforderlichen 950px aufgenommen hat.

Im Inneren des Behälters div Sie dann ein div mit der ID "Inhalt" haben (keine Stilregeln), und dann zwei divs: "mainbar" und "sidebar", deren Stile sind:

#mainbar { 
    float: left; 
    margin-bottom: 40px; 
    width: 715px; 
} 

#sidebar { 
    float: right; 
    width: 220px; /* this is also set in the "style" attribute * 
} 

Diese links und richtige Schwimmer sind, was die Bars an den richtigen Stellen positioniert.

Eine weitere praktische CSS-Regel ist:

clear 

diese eingestellt werden können, „beide“, „links“ oder „rechts“ und werden im Grunde den Schwimmer auf dem Behälter zurück.

Allerdings klingt es wie sind Sie nach, was oft genannt wird die „Holy Grail of CSS“ (Rick weist darauf hin, dass es einen Fehler in dieser mit IE7 finden here for a fix) aus gutem Grund: Drei Säulen, mit ihnen mindestens eine der flexibel.

Andere Beispiele von vollständig flexiblen Layouts sind:

• Multi-column layouts climb out of the box
• Fluid grids

Answer 2

Es kann eine Kombination aus Float, Position und Rand sein und wie Sie diese Elemente einstellen. Ohne eine URL wird es schwierig sein, genau zu sagen, was das Problem ist oder wie es zu beheben ist.

Für einen Ausgangspunkt, würde ich vorschlagen, YUI CSS Grids oder 960.gs (960 Grid System) und eine der verschiedenen reset.css Dateien herum schweben da draußen. YUI hat einen sehr guten. Die reset.css-Datei sorgt dafür, dass Ihre CSS-Datei in allen Browsern gleich aussieht und funktioniert, und die Grid-Systeme geben Ihnen einen Ausgangspunkt für die Gestaltung Ihrer Site. Sie geben Ihnen auch die Sicherheit, dass das, was Sie entwerfen, in allen Browsern gleich aussieht und funktioniert.

http://developer.yahoo.com/yui/grids/ http://960.gs/

Answer 3

Dies ist ein HTML-Layout-Problem. Wahrscheinlich ist das asp.net mvc-Layout nicht sehr gut gemacht. Haben Sie eine Suche nach 'css Spaltenlayout' im Internet gibt es viele Beispiele, wie man ein gutes Layout zu erreichen. Siehe zum Beispiel In Search of the Holy Grail by MATTHEW LEVINE für eine gute Diskussion einer 3-Spalten-Layout-Technik.