CSS3 Resize özelliğini kullanarak bölme bölmesi

Question

CSS3 özelliğini kullanarak bölme bölme işlemini bölme yapmaya çalışıyorum.

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

sorun i sol div yeniden boyutlandırmak eğer doğru div küçültmek olmayacak ve onun varlık altına itilir: İşte

kodudur. Javascript kullanmadan bölme bölmesini yapabileceğim başka yollar var mı?

Eğer CSS3 kullanılarak yapılamazsa ve javascript'i kullanmanız gerekiyorsa, javascript'in mümkün olduğunca az olması gerektiğini varsayalım.

Teşekkür ederiz.

Answer 1

Diğer öğeyi yeniden boyutlandırmayı neden beklediğinizden emin değilim - bunlar işaretlemeniz arasında herhangi bir ilişki görünmüyor mu?

varsayarsak WebKit ve Firefox geliştirme anlık hedefliyorsanız, bu ilgilendiğiniz şeylerin çoğu yapmalıdır içinde:

bir sarıcı eleman oluşturma ve (uygun satıcı önekleri kullanarak) display: box olarak ayarlayın
2. senin unsurlarından biri aksi şeyler sadece (appropriate vendor prefixes ile tekrar) box-flex: 1 olmak diğer Set tarayıcısı

için çok kafa karıştırıcı, boyut ama boyutlandırılabilir düzeltilmesi ayarlayın

Here's a working example, Chrome'da Firefox'tan daha iyi çalışır; desteklenen başka tarayıcılara ihtiyacınız varsa, bir JavaScript çözümüne ihtiyacınız olacaktır.

--edit:

Sadece bu eski cevabı üzerinde upvote, eski örneği öylesine here's a new example, flexbox'a yeni sürümü ile çalışmaz aldık. Yukarıdaki adımlarda display: box'u display: flex ve box-flex: 1 ile flex: 1 1 0; ile değiştirin.