Qual è il modo migliore per posizionare un div in CSS?

Question

Sto cercando di posizionare questo menu:

<div class="left-menu" style="left: 123px; top: 355px">  
    <ul>  
        <li> Categories </li>  
        <li> Weapons </li>  
        <li> Armor </li>  
        <li> Manuals </li>  
        <li> Sustenance </li>  
        <li> Test </li>  
    </ul>  
</div>

Sul lato sinistro della pagina.Il problema è che se utilizzo valori assoluti o fissi.
Dimensioni dello schermo diverse visualizzeranno la barra di navigazione in modo diverso.Ho anche un secondo div che contiene tutto il contenuto principale che deve essere spostato anch'esso a destra, finora sto utilizzando valori relativi che sembrano funzionare indipendentemente dalle dimensioni dello schermo.

Answer 1

float è infatti la proprietà giusta per raggiungere questo obiettivo.Tuttavia, l'esempio fornito da bmatthews68 può essere migliorato.La cosa più importante delle scatole galleggianti è che loro dovere specificare una larghezza esplicita.Questo può essere piuttosto scomodo, ma è così che funzionano i CSS.Tuttavia, notalo px è un'unità di misura che non trova posto nel mondo di HTML/CSS, almeno non per specificare le larghezze.

Ricorri sempre a misure che funzionino con dimensioni di carattere diverse, ad es.utilizzare em O %.Ora, se il menu è implementato come un corpo mobile, significa che il contenuto principale fluttua “intorno” ad esso.Se il contenuto principale è più alto del menu, questo potrebbe non essere quello che desideri:

float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png

<div style="width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>

Puoi correggere questo comportamento fornendo il contenuto principale a margin-left uguale alla larghezza del menu:

float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png

<div style="width: 10em; float: left;">Left</div>
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div>

Nella maggior parte dei casi vuoi anche fornire il contenuto principale a padding-left in modo che non si “attacchi” troppo al menu.

A proposito, è banale modificare quanto sopra in modo che il menu sia sul lato destro invece che a sinistra:cambia semplicemente ogni occorrenza della parola “sinistra” in “destra”.

Ah, un'ultima cosa.Se il contenuto del menu è superiore al contenuto principale, verrà visualizzato in modo strano perché float fa alcune cose strane.In tal caso, dovrai pulire la casella che si trova sotto il corpo mobile, come nell'esempio di bmatthews68.

/MODIFICARE:Dannazione, l'HTML non funziona come mostrato nell'anteprima.Bene, ho incluso invece le foto.

Answer 2

Penso che dovresti usare il galleggiante proprietà per posizionare cose del genere. Puoi leggerlo qui.

Answer 3

Tutte le risposte che dicono di usare i float (con larghezze esplicite) sono corrette.Ma per rispondere alla domanda iniziale, qual è il modo migliore per posizionare a <div>?Dipende.

Il CSS è altamente contestuale e il flusso di una pagina dipende dalla struttura del tuo HTML.Il flusso normale è il modo in cui gli elementi e i relativi figli verranno disposti dall'alto verso il basso (per gli elementi blocco) e da sinistra a destra (per gli elementi in linea) all'interno del blocco contenitore (solitamente il genitore).Ecco come dovrebbe funzionare la maggior parte del tuo layout.Tenderai a fare affidamento su width, margin, E padding per definire la spaziatura e la disposizione degli elementi rispetto agli altri elementi circostanti (siano essi <div>, <ul>, <p>, o altrimenti, l'HTML è per lo più semantico a questo punto).

Utilizzando stili come float O absolute O relative il posizionamento può aiutarti a raggiungere obiettivi molto specifici del tuo layout, ma è importante sapere come utilizzarli.Come è stato spiegato, float viene generalmente utilizzato per posizionare elementi di blocco uno accanto all'altro ed è davvero utile per i layout a più colonne.

Non entrerò in ulteriori dettagli qui, ma potresti voler controllare quanto segue:

• Riferimenti CSS di SitePoint - probabilmente il riferimento CSS più diretto e completo che abbia trovato online.
• Modello di formattazione visiva W3C CSS2.1 - Sì, è una lettura difficile, ma spiega tutto.

Answer 4

Dovresti utilizzare gli attributi CSS float e clear per ottenere l'effetto desiderato.

Per prima cosa ho definito gli stili per le chiamate sinistra e destra per le due colonne nel mio layout e uno stile chiamato clearer utilizzato per ripristinare il flusso della pagina.

<style type="text/css">
.left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 800px;
}
.clear {
    clear: both;
    height: 1px;
}
</style>

Poi li uso per impaginare la mia pagina.

<div>
 <div class="left">
   <ul>
    <li>Categories</li>
    <li>Weapons</li>
    <li>Armor</li>
    <li>Manuals</li>
    <li>Sustenance</li>
    <li>Test</li>
  </ul> 
 </div>
 <div class="right">
   Blah Blah Blah....
 </div>
</div>
<div class="clear" />

Answer 5

puoi usare il float

<div class="left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>

nel file CSS

.left-menu{float:left;width:200px;}