Div uno affianco senza galleggiante

Question

Come posso fare in modo che div 'left' e 'right' assomiglino a colonne affiancate?

So che posso usare float: left su di loro e che funzionerà ... ma il punto 5 e 6 qui http://www.barelyfitz.com/screencast...s/positioning/ il ragazzo dice che è possibile, io non riesco a farlo funzionare anche se ...

Codice:

<style> 
div.left { 
    background:blue; 
    height:200px; 
    width:300px; 
} 

div.right{ 
    background:green; 
    height:300px; 
    width:100px; 
} 

.container{ 
    background:black; 
    height:400px; 
    width:450px; 
} 
</style> 

<div class="container"> 
     <div class="left"> 
      LEFT 
     </div> 
     <div class="right"> 
      RIGHT 
     </div> 
</div> 

Answer 1

Il metodo usuale quando non si utilizza float s è quello di utilizzare display: inline-block: http://www.jsfiddle.net/zygnz/1/

.container div { 
    display: inline-block; 
} 

Do atto i suoi limiti però: c'è uno spazio aggiuntivo dopo il primo blocco - questo è perché i due blocchi sono ora essenzialmente inline elementi, come a e em, così spazi tra i due conteggi. Questo potrebbe infrangere il tuo layout e/o non sembrare bello, e preferirei non togliere tutti gli spazi bianchi tra i personaggi per il gusto di questo lavoro.

I galleggianti sono anche più flessibili, nella maggior parte dei casi.

Answer 2

si può provare con un margine per div a destra

margin: -200px 0 0 350px; 

Answer 3

A div è un block level element, il che significa che si comporterà come un blocco, e i blocchi non possono stare fianco a fianco senza essere flottati. È possibile tuttavia li impostato per inline elements con:

display:inline-block; 

fare un tentativo ...

---

Un altro modo è quello di metterli utilizzando:

position:absolute; 
left:0; 

e/o

position:absolute; 
right:0; 

Nota: Perché ciò funzioni come previsto, l'elemento wrapper deve avere un position:relative; in modo che gli elementi con posizionamento assoluto rimangano relativi al loro elemento wrapper.

Answer 4

È inoltre possibile utilizzare il layout di CSS3 flexbox, che al giorno d'oggi è well supported.

.container { 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: space-between; 
    background:black; 
    height:400px; 
    width:450px; 
} 

.left { 
    flex: 0 0 300px; 
    background:blue; 
    height:200px; 
} 

.right { 
    flex: 0 1 100px; 
    background:green; 
    height:300px; 
} 

See Example (con gli stili di legacy per la massima compatibilità) & Learn more su FlexBox.

Answer 5

Attualmente sto lavorando su questo, e ho già un numero di soluzioni. È bello avere un sito di alta qualità, che posso usare anche per mia comodità. Perché se non scrivi queste cose, alla fine dimenticherai alcune parti. E posso anche raccomandare di scrivere alcuni di base in giù se stai iniziando qualsiasi tipo di nuova programmazione/design.

Quindi se le funzioni float stanno causando problemi, ci sono un paio di opzioni che puoi provare.

Uno è modificare l'allineamento div nel tag div come se fosse <div class="kosher" align=left> Se questo non ti soddisfa, c'è un'altra opzione con margine come tale.

.leftdiv { 
    display: inline-block; 
    width: 40%; 
    float: left; 
} 
.rightdiv { 
    display: block; 
    margin-right: 20px; 
    margin-left: 45%; 
} 

Non dimenticare di rimuovere il <div align=left>.

Answer 6

Usa display:table-cell; per la rimozione di spazio tra .Left e .right

div.left { 
 
    background:blue; 
 
    height:200px; 
 
    width:300px; 
 
} 
 

 
div.right{ 
 
    background:green; 
 
    height:300px; 
 
    width:100px; 
 
} 
 

 
.container{ 
 
    background:black; 
 
    height:400px; 
 
    width:450px; 
 
} 
 

 
.container > div { 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div> 
 
    <div class="left"> 
 
     LEFT 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div class="right"> 
 
     RIGHT 
 
    </div> 
 
    </div> 
 
</div>