4 colonnes de largeur fixe avec la boîte en haut à gauche couvrant 2 colonnes. Centré. Comment?

Chaque colonne a une largeur fixe de 200px avec une marge de 20px.
La boîte en haut à gauche et les colonnes ont une hauteur variable.4 colonnes de largeur fixe avec la boîte en haut à gauche couvrant 2 colonnes. Centré. Comment?

Vous aimez cette

alt text

Tor Valamo aimablement fourni un answer to a similar question (qui est élastique, c'est fixe), mais je ne peux pas centrer la mise en page, car il utilise position: absolute.

Comment puis-je le faire? Je sais qu'en utilisant une table avec colspan et rowspan la réponse à ce problème est triviale, mais je voudrais éviter la disposition basée sur la table comme la peste!

Source

2009-12-13 Victor

Pourquoi, en utilisant des tables pour la mise en page, bien sûr * (canards et pistes) * ;-) –

Vous ne savez pas exactement ce que vous demandez, mais quelque chose comme ça ...?

<div style="float: left;"> 
    <div style="width: 420px;">top</div> 
    <div style="width: 200px; float: left;">bottom left</div> 
    <div style="width: 200px; float: left;">bottom right(ish)</div> 
    <div style="clear: both;"></div> 
</div> 
<div style="width: 200px; float: left;">big left box</div> 
<div style="width: 200px; float: left;">big right box</div>

Source

2009-12-13 15:46:21

remercie David mais ne semble pas fonctionner – Victor

tout à fait raison. j'ai édité. –

Merci, David! – Victor

Vous pouvez toujours utiliser la mise en page que vous avez lié et ont-il centré, en dépit de la position: absolute. Je l'ai adapté pour vous ici (vous devez modifier ajouter en marge, mais il fonctionne, je l'ai testé:

<html> 
<head> 
    <style> 
     #outer, #left, #right, #top_left, #bottom_left, 
     #bottom_left_left, #bottom_left_right, #right_left, #right_right { 
      position:absolute; 
      top:0; 
      right:0; 
      bottom:0; 
      left:0; 
      border:1px solid #000; 
     } 
     #outer {margin:0 auto; position:relative;width:800px;} 
     #left {right:50%;width:400px;} 
     #top_left {position:relative; width:400px;} 
     #bottom_left {position:relative;} 
     #bottom_left_left {right:50%; width:200px;} 
     #bottom_left_right {left:50%; width:200px;} 
     #right {left:50%;} 
     #right_left {right:50%; width:200px;} 
     #right_right {left:50%; width:200px;} 
    </style> 
</head> 
<body> 
    <div id="outer"> 
     <div id="left"> 
      <div id="top_left">Top left</div> 
      <div id="bottom_left"> 
       <div id="bottom_left_left">Bottom left</div> 
       <div id="bottom_left_right">Bottom right</div> 
      </div> 
     </div> 
     <div id="right"> 
      <div id="right_left">Near Right</div> 
      <div id="right_right">Far Right</div> 
     </div> 
    </div> 
</body> 
</html>

Source

2009-12-13 16:16:15

4 colonnes de largeur fixe avec la boîte en haut à gauche couvrant 2 colonnes. Centré. Comment?

Répondre

Questions connexes