使用CSS3拆分窗格调整属性 [英] Split pane using CSS3 Resize property

问题描述

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

I've been trying to do split pane resizing using the CSS3 property.

这里是代码：

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

The problem is if i resize the left div, the right div won't shrink and its being pushed to the bottom. Are there any other ways that I can make the split pane without using the javascript?

说，如果不能使用CSS3，真的需要使用javascript

Say, if it can't be done using CSS3 and really need to use the javascript, the javascript should be minimal if can.

谢谢。

推荐答案

p>我不知道为什么你期望另一个元素调整大小 - 他们之间似乎没有任何关系在你的标记？

I'm not sure why you're expecting the other element to resize - there doesn't appear to be any relationship between them in your markup?

假设你'定位WebKit和Firefox开发快照，这应该做你感兴趣的大部分：

Assuming you're targeting WebKit and Firefox development snapshots, this should do most of what you're interested in:

1. 创建一个包装器元素并设置它到 display：box （使用适当的供应商前缀）


2. 将其中一个元素设置为固定大小， /developer.mozilla.org/en/CSS/-moz-box-flexrel =noreferrer>相应的供应商前缀）

1. Create a wrapper element and set it to display: box (using appropriate vendor prefixes)
2. Set one of your elements to be fixed size but resizable, otherwise things just get too confusing for the browser
3. Set the other to be box-flex: 1 (again with appropriate vendor prefixes)

这是一个工作示例，在Chrome中的效果优于Firefox - 如果您需要任何其他支持的浏览器，那么您需要一个JavaScript解决方案。

Here's a working example, works better in Chrome than Firefox - if you need any other browsers supported then you'll need a JavaScript solution.

- 编辑：

刚刚得到了一个upvote这个旧的答案，旧的例子不适用于新版本的flexbox，所以这里有一个新例子。在上面的步骤中，用 display：flex 和替换 display：box 与 flex：1 1 0; 。

Just got an upvote on this old answer, the old example doesn't work with the new version of flexbox, so here's a new example. In the above steps replace display: box with display: flex and box-flex: 1 with flex: 1 1 0;.

这篇关于使用CSS3拆分窗格调整属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！