Alternativa al layout <table> in HTML

Question

Quindi adesso ho una pagina Web che ha esattamente le dimensioni della finestra del browser con una coppia overflow:scroll in essa. Fondamentalmente la pagina è disposta in due colonne e tre righe di un tavolo. Vorrei non usare le tabelle per lo stile/la formattazione, quindi la mia domanda è come farei questa migrazione.

La mia pagina (in poche parole):

<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> 

Il problema è essenzialmente voglio nido <div> senza mettere una seconda nidificato <div> su una nuova riga:

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

I voglio quanto sopra per visualizzare due aree scorrevoli sulla stessa linea e non posso usare <textarea> perché il testo deve essere più colori (s ee link fornito). Per coloro che sono interessati, la pagina finirà per essere il lato staff di un sistema di supporto tecnico per messaggi istantanei completamente in-browser per il dipartimento CS di un'università.

Answer 1

Bene, il modo di base si esegue questa operazione è quello di rompere la tua pagina in sei <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> 

Poi si scrive un po 'di CSS:

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

e si dovrebbe ottenere qualcosa di simile:

1 2 

3 4 

5 6 

No nidificato <div> necessario.

Answer 2

Generalmente, è necessario contrassegnare semanticamente il contenuto e quindi modificarlo.

Sembra che si dispone di cinque aree principali:

• messaggi
• Lista utente
• controlli
• ingresso
• chat

Facciamo un po 'di markup:

<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> 

E un po 'di stile:

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

E si dovrebbe essere in grado di completare da qui. La parte più importante della maggior parte dei layout CSS è corretta.

Answer 3

Grazie per il collegamento, questo spiega molto. Sembra familiare, l'ho già fatto, ma può essere piuttosto complicato.

Prima di spiegare il lotto, ho bisogno di sapere se si desidera supportare IE6 con questo. In tal caso, sarà probabilmente necessario tornare alla modalità di quirro di IE, poiché sarà necessario il modello di casella border-box (che non può essere selezionato in altro modo in IE e non è possibile utilizzare entrambe le proprietà top e bottom) .Se è così, consiglio di mettere tutti gli altri browser in questo modello di box, quindi non devi fare due fogli di stile separati per IE e il resto (sì, avrai ancora bisogno di soluzioni alternative, ovviamente). In breve, dopo aver usato questo modello di box diverso, puoi avere quasi la proprietà top e bottom usando lo stile border-top e border-bottom, invece. Agiranno come in alto e in basso, perché ora si trovano all'interno dell'altezza indicata (ad esempio, il 100% del viewport). Spero che questo sia almeno un po 'comprensibile.

In caso contrario, di quello che è un po 'più semplice ed è possibile lo stile utilizzando il posizionamento fisso e <div> ottenere topebottom proprietà. IIRC, questo dovrebbe funzionare anche in IE7 +.

Ma prima, mi dica se è necessario sostenere per il passeggino o no ...

Answer 4

Il problema con le risposte di Eli e Mike D. è che, se ho capito bene questa domanda, puddingfox vuole il tre div più sopra l'altro si distribuiscono sulle dimensioni totali del viewport. In tal caso, avrai problemi a codificare IE6, perché in quel caso non puoi usare entrambe le proprietà superiore e inferiore sullo stesso elemento (che è necessario per le medie div).

Answer 5

Nuova opzione griglia 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>