Come posizionare molti DIV nei CSS

Question

Ho seguito un lungo tutorial su W3Schooles per imparare i CSS; Ho imparato alcune nozioni di base, ma manca ancora il mio obiettivo principale: posizionare i DIV

Questo è quello che sto cercando di fare

*---------*---------*
*         *         *
*         *         *
*---------*---------*

Il mio obiettivo è semplice e banale per alcuni, ma sto avendo mal di testa nel modo giusto , in effetti l'ho fatto ma ha molti problemi quando aggiungo più testo ai DIV oppure si fondono semplicemente con un altro DIV

Quello che ho fatto è semplicemente giocare con i valori di margine e di riempimento usando FireBug. Tutto ciò di cui ho bisogno ora è impararmi questo semplice trucco (spero), quello che mi manca è: come funziona questo semplice posizionamento? Devo usare il posizionamento assoluto, relativo? Cambia il margine, l'imbottitura, la dimensione ??

Se hai un buon tutorial che spiega questo punto, ti preghiamo di indicarlo. Ho avuto altri mal di testa che lo cercavano su Google.

Answer 1

Sembra che tu stia provando a spostare due colonne una accanto all'altra. Questo è abbastanza semplice e approfondito qui:

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout / 2-Col /

Tendo a stare lontano dalla proprietà position a meno che non debba sovrapporre alcuni elementi.

Answer 2

Creazione di un layout a 2 colonne in CSS

Personalmente, non mi piace usare un clear: entrambi su un tag br.

Usa overflow: auto sul div parent invece

<div class="container" style="overflow: auto">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
</div>

Answer 3

Ho avuto la fortuna di emulare il codice trovato nel sistema a griglia 960 .

Il modo giusto è difficile perché molte cose non sono realmente compatibili con il browser. I browser stanno migliorando, ma è comunque un incubo se devi usare qualcosa di compatibile con IE. (molti hack)

Answer 4

Con il posizionamento assoluto puoi assolutamente posizionare qualsiasi tuo div. lo svantaggio è che sono bloccati in quelle posizioni, indipendentemente dalla risoluzione o dalle dimensioni della finestra che mostra la tua pagina.

Quello che potresti fare è spostare la colonna di sinistra a sinistra, quindi non specificare la colonna di destra. Mantieni il posizionamento predefinito non specificando assoluto o relativo, quindi regola le larghezze degli elementi secondo necessità.

Answer 5

Se stai bene impostando larghezze specifiche sui tuoi div, per me ha funzionato bene:

<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>

Il carattere "float: left" allinea le colonne una accanto all'altra. L'ultimo div (con il chiaro: entrambi) lo rende in modo che tutto ciò che metti dopo le colonne rimanga al di sotto delle colonne. In questo modo, puoi modificare la larghezza di entrambe le colonne senza fare confusione con lo stile dell'altra.

Answer 6

<div class="container">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
    <br style="clear:both" />
</div>