Pannello diviso utilizzando la proprietà Ridimensiona CSS3

Question

Ho cercato di eseguire il ridimensionamento del riquadro diviso utilizzando la proprietà CSS3.

Ecco il codice:

<style> 

div.left, div.right {float: left; outline: solid 1px #ccc; 
resize: both; overflow: auto;} 

div.left {width: 20%} 

div.right {width: 80%} 

</style> 

<div class="left"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
</div> 

<div class="right"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
</div> 

Il problema è che se a ridimensionare il div sinistra, la destra div non si restringono e il suo essere spinto verso il basso. Ci sono altri modi in cui posso creare il pannello diviso senza usare il javascript?

Dire, se non può essere fatto usando CSS3 e davvero bisogno di usare il javascript, il javascript dovrebbe essere minimo se possibile.

Grazie.

Answer 1

Non sono sicuro del motivo per cui ci si aspetta che l'altro elemento venga ridimensionato: non sembra esserci alcuna relazione tra loro nel markup?

Supponendo che ci si rivolge WebKit e di sviluppo di Firefox istantanee, questo dovrebbe fare la maggior parte di ciò che ti interessa:

1. Creare un elemento di involucro e impostarlo in display: box (utilizzando adeguati prefissi vendor)
2. impostare uno dei vostri elementi da fissare dimensioni ma ridimensionabile, altrimenti le cose appena arrivato troppo confuso per il browser
3. Impostare l'altro per essere box-flex: 1 (di nuovo con appropriate vendor prefixes)

Here's a working example, funziona meglio in Chrome che in Firefox. Se hai bisogno di altri browser supportati, avrai bisogno di una soluzione JavaScript.

--edit:

Sono appena un upvote su questa vecchia risposta, il vecchio esempio non funziona con la nuova versione di FlexBox, così here's a new example. Nei passaggi precedenti sostituire display: box con display: flex e box-flex: 1 con flex: 1 1 0;.