Question

我希望这是提出这个问题的正确场所，
我想在容器内制作一个带有3 div的网页以左，右div为可调整大小的方式而中心div相应地调整左右div的大小，
类似于plunker或jsfiddle的编码区域，
3个区域必须保持水平，不要跳到下一行。
这个问题已经困扰了我近一个星期，现在任何帮助或指向正确方向的人都会受到赞赏。

注意：我在这个项目中使用AngularJs，Angulary方法的答案是有利的，但其他方法是可以接受的。

更新

我不清楚可调整大小的部分，我的意思是用户可以调整大小，而不仅仅是在浏览器调整大小时可以调整大小，这意味着如果你查看我的example，你会看到当你点击边框时相关区域滑出，中心区域调整到合适的大小现在我的问题是我的问题是没有响应并且它是错误的，当左右两个区域都被隐藏时，点击重新打开右侧区域将显示一个错误在中心区域的行为调整大小时，就像在jsfiddel中调整javascript区域一样，css和结果区域会被调整大小。
更好的示例MS PowerPoint在调整左右面板大小时，相应地调整了中心的大小。

这是我的plnkr，我希望这很清楚 提前致谢。

Answer 1

哦，我很想念这个问题。他要求一个可调整大小的网格，而不是等高的列。

这是一个非常简单的示例，说明如何使用jQuery

将垂直大小调整应用于某个容器

Sources in this jsFiddle

基本Javascript：

var diff = {x: resizeStart.x - e.clientX,y: resizeStart.y - e.clientY}; //Get the difference
resizeStart = {x: e.clientX, y: e.clientY}; // set new starting point

$('.left').width($('.left').width() - diff.x); // Set width of left container
$('.center').css('margin-left', parseInt($('.center').css('margin-left')) - diff.x); //Set margin of center container

我保存了拖动开始的点并获得鼠标所在点的增量。然后我将此delta添加到左容器的宽度和中心容器的边距。

希望这有帮助。

Answer 2

没有默认的方法来处理这个问题，因为右侧和左侧容器在向右或向左浮动时会从布局中掉出来。

处理此问题的唯一方法是在加载页面后获取左侧和右侧容器的高度，并将中心容器的最小高度设置为此值。

使用jQuery获取此功能的一个示例是in this jsFiddle

HTML：

<div class="left">
    <div class="left-content">
        Left Column <br/><br/><br/>more rows please...<br/><br/><br/>more rows please...
    </div>
</div>
<div class="right">
    <div class="right-content">
        Right Column <br/><br/><br/>more rows please...
    </div>
</div>
<div class="center">
    <div class="content">
        Center Column
    </div>
</div>

CSS：

.left {
    float: left;
    width: 200px;
    background: red;
}
.right {
    float: right;
    width: 200px;
    background: green;
}
.center {
    margin: 0 200px;
    background: yellow;
}

JS：

$(document).ready(function() {
    var max_height = 0;
    $('.left, .right, .center').each(function() {
        if($(this).outerHeight() > max_height) max_height = $(this).outerHeight();
    }).css('min-height', max_height);   
});

还有许多CSS技巧无效或非常复杂，但它们也有效。搜索＆＃34;相等高度框＆＃34;。

网页响应可调整大小的网格设计与3个可调整大小的区域

更新

2 个答案: