Was ist die geringste Anzahl von Divs, mit denen das folgende Seitenlayout erstellt werden könnte?

StackOverflow https://stackoverflow.com/questions/4787665

  •  24-10-2019
  •  | 
  •  

Frage

aktualisieren

http://www.jsfiddle.net/dugrchamberlain/nmkxe/

Sehen Sie, wie alles auseinander fällt. Die Breite der ID = Mitte sollte das gesamte verbleibende Zentrum überspannen #left:width - #wrapper:width = #middle:width

Wenn #Right Inhalte enthält, dann enthält dann

(#left:width + #right:width) - #wrapper:width = #middle:width

Neueste Bearbeitung

Nur für die Informationen eines jeden. Das Bild unten wurde in MSPaint erstellt. Kein HTML verwendet überhaupt.

bearbeiten

Dies soll keine Trickfrage sein. Bitte betrachten Sie HTML4 nur als Option. Anscheinend habe ich das HTML4 -Tag verpasst. Überlegen Sie auch alle die Tatsache, dass der richtige Bereich im leeren Bereich zusammengebrochen werden sollte.

Div layout structure

Ohne verschachtelte Divs für die tatsächlichen Merkmale, IE -Menüsinhaltsbereiche usw.

Meine Zählung ist 6 ???

War es hilfreich?

Lösung

Wenn Sie Ihre Elemente nicht in eine divierte Breite einwickeln müssen, benötigen Sie nur 5 - ansonsten 6.

  1. Header
  2. links
  3. Mitte
  4. Rechts
  5. Fusszeile
  6. Wrapper (optional)

Ich hoffe nur, dass Sie nicht versuchen, ein paar Bytes zu sparen, indem Sie die Anzahl der Divs für das Layout minimieren :)

Andere Tipps

Bearbeiten: Sie können mit nur 4 Divs davonkommen, wenn Sie Header, links, Mitte und rechts verwenden, und einfach das erste Element in der Fußzeile auf klarstellen: links;

Der einfachste Weg, dies zu tun, besteht darin, so etwas zu tun

Körper p {klar: links; }

Wie in diesem Beispiel: http://jsfiddle.net/86m3m/1/

... und wenn Sie HTML5 verwenden: Keine Divs benötigt;)

<!DOCTYPE html> 
    <html>    
    <head>...</head>
    <body>

    <header>
       ...
       <nav id="main"> ... </nav>
    </header>

    <nav id="left"> ... </nav>

    <section id="main_content"> ... </section>

    <section id="right_content"> ... </section>

    <footer> ... </footer>

    </body> 
    </html>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top