Comment diviser la page en 4 parties égales?

Je veux diviser ma page en quatre parties égales, de même hauteur et de la largeur (50-50%).

Je ne veux pas utiliser de JavaScript. Je veux blocs (<div>s) être redimensionnées automatiquement (relativement) si la fenêtre du navigateur est redimensionnée.

Je n'ai pas travaillé avec CSS pour un long moment. Je n'ai aucune idée de comment gérer cela.

  • Ainsi, une grille 2x2 est ce que vous voulez?
  • Oui....
InformationsquelleAutor Santosh Kumar | 2012-09-05
  1. 37

    HTML

    <div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>

    CSS

    html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#div1 { background: #DDD; }
#div2 { background: #AAA; }
#div3 { background: #777; }
#div4 { background: #444; }

    Démo à http://jsfiddle.net/CRSVU/

    • Cela ne fonctionne pas. jsfiddle.net/BtFNg
    • Il n'. Je viens de faire ce dans le bloc-notes et visualisés à l'aide de Firefox 15 et c'est bien en cela. Reconstruire vous-même si vous le souhaitez. Je pense que la balise body est traitée différemment dans jsfiddle et peut-être que les divs nécessitent un peu de contenu.
    • Scott est correct, jsfiddle ne rend pas ma réponse correctement. Cependant le mettre dans un bloc-notes doc et de faire un fichier HTML avec elle. Et devrait fonctionner correctement.
    • Cheers @thatuxguy. Sympa de voir un peu plus convivial réponse que Curt!
    • np, Il est toujours préférable de tester localement par le biais d'un site comme jsfiddle. surtout si c'est uniquement du simple HTML/CSS
    • Pour le faire fonctionner dans jsFiddle, changement body { height: 100%; padding: 0; margin: 0; } à html, body { height: 100%; padding: 0; margin: 0; }
    • En effet. Je garde un squelette de fichier html prêt à l'aider, quand ces petits problèmes surviennent. JSfiddle est génial pour tester les événements javascript, mais pas le meilleur pour la mise en page. C'est juste une suite de tests, pas un navigateur web.
    • Bon crier @j08691, merci
    • Mes excuses Scott, je suis frustré quand les gens postent des réponses qui semblent ne pas avoir été testé. Je ne savais pas jsfiddle était une exception. Je suis corrigé!
    • Pas de probs, excuses acceptées 🙂
    • Nice one, j'ai mis à jour mon jsfiddle pour démontrer cette jsfiddle.net/BtFNg/1. +1
    • Scott Brown et @thatuxguy, le code d'origine n' pas travail. Que vous prenez avantage de la Mode Quirks, en ne mettant pas <!DOCTYPE html> au début du fichier. Jeter que DOCTYPE là, et vous remarquerez que la html {height:100%;} est nécessaire. J'ai mis à jour la réponse.
    • Il y a un peu plus de problème. J'ai un autre élément dans chacune des DIVs. Et je veux de centre aussi bien (par rapport à leur DIVs de la hauteur et de la largeur). Par exemple, j'ai ceci dans ma 1ère div: <h1> This is DIV 1</h1>, et ainsi de suite.
    • Les charges d'informations sur la verticale de centrage, il suffit de faire une recherche et je suis sûr que vous trouverez ce que vous êtes après. Il suffit de chercher vertical centering css sur Google et vous trouverez tout ce dont vous avez besoin, je suis sûr que
    • En dehors de centrage, c'est à dire n'est pas très heureux avec cela, avez-vous une solution pour elle.
    • Assurez-vous d'utiliser un doctype valide. Peut-être c'est à dire est retomber en Mode Quirks.
    • exemple simple, qui fonctionne pour moi..en mesure d'intégrer avec d'autres div conteneurs de la mine.

    InformationsquelleAutor Scott Brown
  2. 6

    Si vous voulez avoir le contrôle sur l'endroit où ils sont placés distinct de l'ordre de code source:

    Démo: http://jsfiddle.net/NmL2W/

    <div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>​
<div id="SW"></div>
    html, body { height:100%; margin:0; padding:0 }
div { position:fixed; width:50%; height:50% }
#NW { top:0;   left:0;   background:orange  }
#NE { top:0;   left:50%; background:blue    }
#SW { top:50%; left:0;   background:green   }
#SE { top:50%; left:50%; background:red     }    ​

    Remarque: si vous souhaitez rembourrage sur vos régions, vous aurez besoin de définir les box-sizing à border-box:

    div {
  /* ... */
  padding:1em;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

    ...sinon votre "50%" la largeur et la hauteur de devenir "50% + 2em", qui va conduire à visual chevauchements.

    InformationsquelleAutor Phrogz
  3. 3

    Quelques bonnes réponses ici, mais simplement l'ajout d'une approche qui ne soit pas affectée par les frontières et les padding:

    <style type="text/css">
html, body{width: 100%; height: 100%; padding: 0; margin: 0}
div{position: absolute; padding: 1em; border: 1px solid #000}
#nw{background: #f09; top: 0; left: 0; right: 50%; bottom: 50%}
#ne{background: #f90; top: 0; left: 50%; right: 0; bottom: 50%}
#sw{background: #009; top: 50%; left: 0; right: 50%; bottom: 0}
#se{background: #090; top: 50%; left: 50%; right: 0; bottom: 0}
</style>

<div id="nw">test</div>
<div id="ne">test</div>
<div id="sw">test</div>
<div id="se">test</div>
    • Merci. Ne peux pas croire la façon dont beaucoup de temps que j'ai perdu sur cette. Votre solution a très bien fonctionné
    • J'ai une question pourquoi est rangée du bas, du bas=0 et pas à 100%, même avec colonne de droite, droite = 0 et pas à 100%. Comme je l'ai dit il fonctionne, juste curieux
    • np stackoverflow.com/a/44488046/1622684
    • merci encore Rob
    InformationsquelleAutor robC
  4. 0

    essayez ceci... évidemment, vous devez définir chaque div à 25%. Ensuite, vous devez ajouter votre contenu comme vous le souhaitez 🙂 j'Espère que ça aide.

     <html>
   <head>
   <title>CSS devide window by 25% horizontally</title>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <style type="text/css" media="screen"> 
     body {
     margin:0;
     padding:0;
     height:100%;
     }
     #top_div
     {
       height:25%;
       width:100%;
       background-color:#009900;
       margin:auto;
       text-align:center;
     }
     #mid1_div
     {
       height:25%;
       width:100%;
       background-color:#990000;
       margin:auto;
       text-align:center;
       color:#FFFFFF;
     }
     #mid2_div
     {
       height:25%;
       width:100%;
       background-color:#000000;
       margin:auto;
       text-align:center;
       color:#FFFFFF;
     }
     #bottom_div
     {
       height:25%;
       width:100%;
       background-color:#990000;
       margin:auto;
       text-align:center;
       color:#FFFFFF;
     }
   </style>
   </head>
   <body>
     <div id="top_div">Top- height is 25% of window height</div>
     <div id="mid1_div">Middle 1 - height is 25% of window height</div>
     <div id="mid2_div">Middle 2 - height is 25% of window height</div>
     <div id="bottom_div">Bottom - height is 25% of window height</div>
   </body>
 </html>

    Testé et fonctionne très bien, copiez le code ci-dessus dans un fichier HTML, et de l'ouvrir avec votre navigateur.

    InformationsquelleAutor thatuxguy
  5. 0

    Similaire à d'autres postes, mais avec une importante distinction à faire ce travail à l'intérieur d'un div. La plus simple des réponses ne sont pas très "copier-coller" -parce qu'ils sont directement modifier div ou dessiner sur toute la page.

    La clé ici est que la div contenant dividedbox a positionnement relatif, lui permettant de s'asseoir tranquillement dans votre document avec les autres éléments, tandis que les milieux ont un positionnement absolu, vous donnant verticale/horizontale de contrôle à l'intérieur de la div contenant.

    Comme un bonus, le texte est sensiblement centré dans les quartiers.

    HTML: 

    <head>
  <meta charset="utf-8">
  <title>Box model</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1 id="title">Title Bar</h1>
  <div id="dividedbox">
    <div class="quarter" id="NW">
      <p>NW</p>
    </div>
    <div class="quarter" id="NE">
      <p>NE</p>
    </div>
    <div class="quarter" id="SE">
      <p>SE</p>
    </div>​
    <div class="quarter" id="SW">
      <p>SW</p>
    </div>
  </div>
</body>

</html>

    CSS:

    html, body { height:95%;} /* Important to make sure your divs have room to grow in the document */
#title { background: lightgreen}
#dividedbox { position: relative; width:100%; height:95%}   /* for div growth */
.quarter {position: absolute; width:50%; height:50%;  /* gives quarters their size */
  display: flex; justify-content: center; align-items: center;} /* centers text */
#NW { top:0;    left:0;     background:orange;     }
#NE { top:0;    left:50%;   background:lightblue;  }
#SW { top:50%;  left:0;     background:green;      }
#SE { top:50%;  left:50%;   background:red;        }

    http://jsfiddle.net/og0j2d3v/

    InformationsquelleAutor Swordopolis