当前位置：文江博客话题详情

如何将中间的列移动到左边的列？

发布于 2024-11-01 10:06:53 字数 286 浏览 1 评论 0原文

http://jsfiddle.net/mnbayazit/zfBPQ/1/

本质上我想要

[ 33%剩余空间 | 100 像素 |剩余位置的 67% ]

这是我迄今为止所能达到的最接近的结果...

我正在尝试避免使用 JavaScript。使用 JS 一切都很简单...但我真的不想仅仅为了某些定位而依赖它。不保证用户启用它。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酷到爆炸 2024-11-08 10:06:53

仅靠 CSS 无法做到这一点。您需要使用 JavaScript 来计算剩余空间。在以下示例中，中间 div 为 100px，左侧为 33%，右侧为剩余空间的 67%。使用查询，您可以

function calc() {
    var ww = $(window).width();
    var rem = ww - $('.div2').width();
    $('.div1').css('width', rem * 0.33);
    $('.div3').css('width', rem * 0.67);
}
calc();
$(window).resize(calc);

在 http://jsfiddle.net/HpJXk/ 处检查工作示例

You cannot do this with CSS alone. You need to use JavaScript to calculate remaining space. In the following example, middle div is 100px, left is 33% and right is 67% of remaining space. With Query you can do

function calc() {
    var ww = $(window).width();
    var rem = ww - $('.div2').width();
    $('.div1').css('width', rem * 0.33);
    $('.div3').css('width', rem * 0.67);
}
calc();
$(window).resize(calc);