Alternative à <table> mise en page en HTML

Question

Donc maintenant j'ai une configuration de page Web pour être exactement la taille de la fenêtre du navigateur avec un couple overflow:scroll dans celui-ci. Fondamentalement, la page est disposée en deux colonnes et trois rangées d'une table. Je ne voudrais pas utiliser de tables pour le style/formatage, alors ma question est de savoir comment je ferais cette migration.

Ma page (en résumé):

<table> 
<tr> 
    <td> 
     <div style="overflow:scroll;"> 
      <div> 
       stuff1 
      </div> 
      <div> 
       stuff1A 
      </div> 
     </div> 
    </td> 
    <td> 
     <div style="overflow:scroll;"> 
      <div> 
       stuff2 
      </div> 
      <div> 
       stuff2A 
      </div> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td> 
      <input type="submit"><input type="submit"><input type= "submit"> 
    </td> 
    <td> 
      <input type="submit"><input type="submit"><input type="submit"> 
    </td> 
</tr> 
<tr> 
    <td> 
    <textarea>stuff3</textarea></td> 
    <td><select multiple> 
     </select></td> 
</tr> 

Le problème essentiel est que je veux nid <div> sans mettre un second <div> niché sur une nouvelle ligne:

<div style="overflow:scroll;"> <div>stuff4</div><div>stuff4A</div> </div> 
<div style="overflow:scroll;"> <div>stuff5</div><div>stuff5A</div> </div> 

I Je veux que le texte ci-dessus affiche deux zones de défilement sur la même ligne et je ne peux pas utiliser <textarea> car le texte doit être de plusieurs couleurs (s ee lien fourni). Pour ceux qui sont intéressés, la page sera finalement le côté personnel d'un système de support technique de messagerie instantanée entièrement intégré au navigateur pour le département CS d'une université.

Answer 1

Eh bien, la méthode de base que vous faites est de briser votre page en six <div> s:

<div class="left" id="l1">1</div> 
<div class="right" id="r1">2</div> 
<div class="left" id="l2">3</div> 
<div class="right" id="r2">4</div> 
<div class="left" id="l3">5</div> 
<div class="right" id="r3">6</div> 

Ensuite, vous écrivez du code CSS:

div.left { 
    float: left; 
    clear: both; 
} 

Et vous devriez obtenir quelque chose comme:

1 2 

3 4 

5 6 

Aucun <div> imbriqué.

Answer 2

Vous devez généralement marquer votre contenu sémantiquement, puis le styler.

Il semble que vous avez cinq domaines principaux:

• messages
• liste des utilisateurs
• contrôles
• d'entrée
• de chatrooms

Faisons quelques balises:

<div class="left"> 
    <div id="messages"> 
     messages 
    </div> 
    <div id="user-list"> 
     user-list 
    </div> 
</div> 
<div id="controls"> 
    controls 
</div> 
<div class="left"> 
    <div id="input"> 
     input 
    </div> 
    <div id="chatrooms"> 
     chatrooms 
    </div> 
</div> 

Et un peu de style:

.left{ 
    clear:both; 
} 
    .left div{ 
     float: left; 
    } 
#controls{ 
    clear: both; 
} 

Et vous devriez être en mesure de le compléter d'ici. La partie la plus importante de la plupart des mises en page CSS est le flottement approprié.

Answer 3

Merci pour le lien, cela explique beaucoup. Cela me semble familier, je l'ai déjà fait, mais ça peut être assez compliqué. Avant d'expliquer le sort, j'ai besoin de savoir si vous voulez supporter IE6 avec ceci. Si c'est le cas, vous devrez probablement revenir en mode IE quirks, car vous aurez besoin du modèle de boîte border-box (qui ne peut pas être sélectionné autrement dans IE, et il n'est pas possible d'utiliser les propriétés top et bottom) .Si c'est le cas, je recommande de mettre tous les autres navigateurs dans ce modèle de boîte, ainsi vous ne devez pas faire deux feuilles de style séparées pour IE et le reste (oui, vous aurez toujours besoin de solutions de contournement, bien sûr). En bref, après avoir utilisé ce modèle de boîte différent, vous pouvez avoir des propriétés quasi top et bottom en les stylisant à l'aide de border-top et border-bottom. Ils agissent en haut et en bas, car ils sont maintenant à l'intérieur de la hauteur donnée (par exemple, 100% de la fenêtre). J'espère que c'est au moins un peu compréhensible.

Sinon, que c'est un peu plus simple et vous pouvez définir le style en utilisant le positionnement fixe et <div> obtenir topetbottom propriétés. IIRC, cela devrait également fonctionner dans IE7 +.

Mais d'abord, dites-moi si vous avez besoin d'aide pour le buggy ou non ... une

Answer 4

Le problème avec les réponses de Eli et Mike D. est que, si je comprends bien cette question correctement, puddingfox veut la trois divs les uns au-dessus des autres sont répartis sur la taille totale de la fenêtre. Dans ce cas, vous aurez des problèmes pour coder IE6, car vous ne pouvez pas utiliser les propriétés top et bottom sur le même élément (ce qui est nécessaire pour les divs du milieu).

Answer 5

Nouvelle option de grille CSS:

<style> 
#grid { 
    display: grid; 
    grid-template-columns: 20% 20% 20%; 
} 
</style> 

<div id="grid"> 
    <div>first</div> 
    <div>second</div> 
    <div>thrid</div> 
    <div>fourth</div> 
    <div>fifth</div> 
    <div>sixth</div> 
    <div>seventh</div> 
    <div>eighth</div> 
    <div>nineth</div> 
</div>