使用 CSS3 Resize 属性分割窗格
我一直在尝试使用 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 应该最少。
谢谢你。
I've been trying to do split pane resizing using the CSS3 property.
Here is the 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>
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?
Say, if it can't be done using CSS3 and really need to use the javascript, the javascript should be minimal if can.
Thank you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不确定为什么您期望其他元素调整大小 - 在您的标记中它们之间似乎没有任何关系？
假设您的目标是 WebKit 和 Firefox 开发快照，这应该可以完成您感兴趣的大部分操作：
display: box（使用适当的供应商前缀）box-flex: 1（再次使用 适当的供应商前缀)这是一个工作示例，在 Chrome 中比在 Firefox 中工作得更好 - 如果您需要支持任何其他浏览器，那么您将需要 JavaScript 解决方案。
--edit：
刚刚对这个旧答案投了赞成票，旧示例不适用于新版本的 Flexbox，因此
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?
Assuming you're targeting WebKit and Firefox development snapshots, this should do most of what you're interested in:
display: box(using appropriate vendor prefixes)box-flex: 1(again with appropriate vendor prefixes)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.
--edit:
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: boxwithdisplay: flexandbox-flex: 1withflex: 1 1 0;.