使用CSS3 Resize属性拆分窗格

Question

我一直在尝试使用CSS3属性调整分割窗格大小。

以下是代码：

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

问题是如果我调整左侧div，右侧div不会收缩并且会被推到底部。有没有其他方法可以在不使用javascript的情况下制作拆分窗格？

说，如果使用CSS3无法完成，并且确实需要使用javascript，那么javascript应该是最小的，如果可以的话。

谢谢。

Answer 1

我不确定为什么你期望另一个元素调整大小 - 它们在你的标记中似乎没有任何关系？

假设您的目标是WebKit和Firefox开发快照，那么这应该是您感兴趣的大部分内容：

1. 创建一个包装器元素并将其设置为display: box（使用适当的供应商前缀）
2. 将您的一个元素设置为固定大小但可调整大小，否则对浏览器来说太麻烦了
3. 将另一个设为box-flex: 1（再次使用appropriate vendor prefixes）

Here's a working example，在Chrome中比Firefox更好 - 如果您需要任何其他支持的浏览器，那么您将需要一个JavaScript解决方案。

- 编辑：

刚刚得到了这个旧答案的支持，旧示例不适用于新版本的flexbox，所以here's a new example。在上述步骤中，将display: box替换为display: flex，将box-flex: 1替换为flex: 1 1 0;。