使用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(再次使用适当的供应商前缀)

这是一个工作示例,在Chrome中比Firefox更好 - 如果您需要任何其他支持的浏览器,那么您将需要一个JavaScript解决方案.

- 编辑:

刚刚得到一个关于这个旧答案的upvote,旧的例子不适用于新版本的flexbox,所以这是一个新的例子.在上述步骤中替换display: box用display: flex和box-flex: 1与flex: 1 1 0;.