Come si mettono due div uno vicino all'altro in modo da riempire lo spazio disponibile

Ho due div, quello destro è largo 80 px, l'altro dovrebbe riempire lo spazio rimanente. Finora ho provato:Come si mettono due div uno vicino all'altro in modo da riempire lo spazio disponibile

<!DOCTYPE html> 

<html> 
<head> 
    <title>#{get 'title' /}</title> 
    <style type="text/css"> 
     body { 
      margin: 0; 
      padding: 0; 
     } 

     #left { 
      position: relative; 
      margin-right: 80px; 
      background-color: red; 
     } 

     #right { 
      float: right; 
      position: relative; 
      text-align: left; 
      width: 80px; 
      background-color: yellow; 
     } 
    </style> 
</head> 
<body> 
<div id="left"> 
    Left 
</div> 
<div id="right"> 
    Right 
</div> 
</body> 
</html>

Tuttavia, la casella di destra è sempre posta sotto la casella di sinistra e non a destra. Immagino sia per via del margine. Ho anche provato un margine sinistro: -80px a destra ma questo non sembra cambiare nulla. Quindi, come devo cambiare il CSS in modo che il div di destra sia nella stessa linea del div di sinistra?

fonte

2011-02-09 Jan Thomä

Hanno il diritto div prima di sinistra.

<div id="right"> 
    Right 
</div> 
<div id="left"> 
    Left 
</div>

Working Example

fonte

2011-02-09 14:23:14

Questo funziona, e sembra essere la più facile delle soluzioni proposte. Grazie! Quello che non capisco è, perché questo funziona. Potresti spiegare perché? –

Poiché gli elementi sono disegnati in ordine, invece di spostarsi verso il basso oltre l'elemento di sinistra per disegnare a destra, la destra viene disegnata prima e la sinistra viene disegnata attorno all'elemento destro. –

Vedo. Grazie :) –

Questo perché div è un elemento di blocco, il che significa che sarà sempre rompere il flusso. Quello che puoi fare è cambiare entrambi i display div a inline e float a left.

fonte

2011-02-09 14:23:26

usando 'display: inline' il contenuto definirà la larghezza dell'elemento, con il risultato che l'elemento' # left' non si estende al lato destro senza usare un 'width'. – Sotiris

È possibile modificare il position:relative; di #right-position:absolute;top:0;right:0;. Questo posizionerà l'elemento nell'angolo in alto a destra del suo genitore.

Esempio: http://jsfiddle.net/WaQGW/

fonte

2011-02-09 14:26:04 Sotiris

In alternativa, se stai cercando per il div SINISTRA per rimanere a una larghezza statica e il div DESTRA per espandersi e contrarsi con la dimensione della pagina, utilizza il seguente codice :

.left { 
    float: left; 
    position: relative; 
    width: 80px; 
    background-color: red; 
} 

.right { 
    position: relative; 
    text-align: left; 
    margin-left: 80px; 
    background-color: yellow; 
}

E l'HTML sarebbe ...

<div class="left">Left</div> 
<div class="right">Right</div>

fonte

2012-08-13 18:19:52

al giorno d'oggi può essere fatto con flex.

Caricare il recipiente di (body in questo caso) display proprietà flex, larghezza quindi impostare di sinistra div-100%.

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 

 
#left { 
 
    background-color: red; 
 
    width: 100%; 
 
} 
 

 
#right { 
 
    width: 80px; 
 
    background-color: yellow; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>#{get 'title' /}</title> 
 
</head> 
 
<body> 
 
<div id="left"> 
 
    Left 
 
</div> 
 
<div id="right"> 
 
    Right 
 
</div> 
 
</body> 
 
</html>

fonte

2016-01-12 17:49:33

Come si mettono due div uno vicino all'altro in modo da riempire lo spazio disponibile

risposta

Problemi correlati