3 Spalten: eine mit maximaler Breite, zwei andere mit minimaler Breite

8

Drei Spalten müssen die Breite des übergeordneten Containers ausfüllen. Die Breite der linken und der rechten Spalte darf nicht kleiner als 150 px sein. Die mittlere Spalte darf nicht größer als 200 Pixel sein.

Ich habe eine Referenzseite erstellt, die JavaScript für das Layout verwendet. Ist es möglich, dasselbe Layout mit reinem CSS zu erstellen?

Screenshot http://elv1s.ru/files/html+css/min-width_max- width_columns.png

Es sollte zumindest in IE 8, Firefox 3.6, Chrome 7, Safari 5 und Opera 10.63 funktionieren.

    
NVI 20.10.2010, 12:08
quelle

3 Antworten

4

Tabellenbasierte Lösung von @PanyaKor .

    
NVI 20.10.2010, 15:46
quelle
3

Ich bin kein Experte, aber ich bin ziemlich sicher, dass, wenn die Antwort ja ist, dass es auf dieser Seite ist:

Diese Seite (und die gesamte Seite) ist brillant - sie zeigt Ihnen, wie Sie viele verschiedene Layouts (nur mit CSS) erreichen können und erklärt genau, wie und warum sie funktionieren. Auch wenn diese Seite kein Layout enthält, das zu Ihnen passt, besteht eine gute Chance, dass die Seite Ihnen eine ungefähre Vorstellung davon gibt, wie Sie vorgehen sollten.

Auch, viel Glück!

    
Justin 20.10.2010 12:35
quelle
2
%Vor%

Ein paar Dinge über dieses Layout:

  1. Ich habe die Höhe und den Hintergrund nur für die Anzeige angegeben.
  2. Überlauf automatisch ist auf dem enthaltenden Element, um die Floats zu löschen; obwohl du auch ein klareres div verwenden kannst.
  3. Der Behälter hat eine Flüssigkeitsbreite, ist aber bei 960 ausgereizt. Ich wähle diese Zahl willkürlich, aber es ist eine gute Idee, die Flüssigkeitsbreiten zu maximieren, bevor Textzeilen zu lang werden.
  4. Wenn Sie den Container flüssig halten, bricht das Layout ab, wenn der Viewport klein genug wird. EDIT: Ich habe eine minimale Breite von 400px zum Container hinzugefügt, dies sollte das Problem beheben .

Zusätzlich würde ich einen Blick auf Ссылка werfen. Obwohl es sich um einen Artikel handelt, der ein dreispaltiges Layout mit fester Flüssigkeit festlegt, denke ich, dass es dort ein paar Ideen gibt, die Sie verwenden könnten, um mein Layout zu verbessern, wenn Sie dazu geneigt wären.

    
Moses 20.10.2010 14:26
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Sourcing rvm von meinem Ubuntu. Profile funktioniert nur manuell, nicht bei der Anmeldung