Geteilte Fläche mit CSS3 Größe ändern

Question

Ich habe versucht, die Größe der geteilten Fläche mit der CSS3-Eigenschaft zu ändern. Hier

ist der Code:

<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> 

Das Problem ist, wenn ich die linke div der Größe, die richtige div wird nicht schrumpfen und sein Sein nach unten gedrückt wird. Gibt es noch andere Möglichkeiten, das geteilte Fenster ohne Javascript zu erstellen?

Sagen, wenn es nicht mit CSS3 getan werden kann und wirklich das Javascript verwenden sollte, sollte das Javascript minimal sein, wenn es kann.

Vielen Dank.

Answer 1

Ich bin mir nicht sicher, warum Sie erwarten, dass das andere Element die Größe ändert - es scheint keine Beziehung zwischen ihnen in Ihrem Markup zu geben?

Angenommen, Sie sind Targeting WebKit und Firefox Entwicklung Snapshots, sollte dies die meisten tun, was Sie interessiert sind:

1. ein Wrapper-Element erstellen und setzen Sie ihn auf display: box (mit entsprechenden Hersteller-Präfixe)
2. Set eines Ihrer Elemente feste Größe, sondern die Größe veränderbar sein, sonst nur Dinge für den Browser zu verwirrend
3. die anderen Satz box-flex: 1 zu sein (wieder mit appropriate vendor prefixes)

Here's a working example, funktioniert besser in Chrome als Firefox - falls Sie andere Browser benötigen, benötigen Sie eine JavaScript-Lösung.

--edit:

Sie sind gerade ein upvote auf dieser alten Antwort, das alte Beispiel nicht mit der neuen Version von Flexbox funktioniert, so here's a new example. In den obigen Schritten ersetzen Sie display: box durch display: flex und box-flex: 1 durch flex: 1 1 0;.