Quel est le nombre minimal de divs qui pourrait être utilisé pour créer la mise en page suivante?

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

  •  24-10-2019
  •  | 
  •  

Question

mise à jour

http://www.jsfiddle.net/dougrchamberlain/nMkxE/

Voyez comment tout se désagrège. la largeur de l'id = milieu doit couvrir l'ensemble du centre restant #left:width - #wrapper:width = #middle:width

si #right contient tout contenu puis

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

dernière édition

Juste pour information everyon. L'image ci-dessous a été créée en MSpaint. Pas HTML utilisé du tout.

modifier

Ce n'est pas censé être une question piège. en plus s'il vous plaît considérer que html4 en option. apparemment j'ai raté la balise HTML4. , Vous êtes aussi compte tenu de tout le fait que le volet droit doit être effondré quand il est vide.

structure de mise en page Div

Non compris les divs imbriqués pour les caractéristiques réelles, à savoir les menus des zones de contenu etc ...

Mon compte est 6 ???

Était-ce utile?

La solution

Si vous ne disposez pas d'envelopper vos éléments dans une div largeur fixe, vous avez seulement besoin 5 -. Sinon 6

  1. en-tête
  2. gauche
  3. milieu
  4. droite
  5. pied de page
  6. emballage (en option)

J'espère juste que vous n'êtes pas essayer de sauver quelques octets en réduisant au minimum la quantité de divs pour la mise en page:)

Autres conseils

EDIT: Vous pouvez vous en sortir avec seulement 4 divs si vous utilisez en-tête, à gauche, au centre et à droite, et simplement définir le premier élément dans le pied de page pour effacer: left;

La façon de le faire est plus facile que de faire quelque chose comme

p {corps clair: left; }

comme dans cet exemple: http://jsfiddle.net/86M3M/1/

... et si vous utilisez html5: Aucun divs nécessaire;) 

<!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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top