1

我希望这是问这个问题的正确地方，
我想在容器内制作一个包含 3 个 div 的网页，以使
左右 div 可以调整大小
，而中心 div 会根据左右 div 调整大小，
有些就像 plunker 或 jsfiddle 中的编码区域一样，
这 3 个区域必须保持水平，不能跳到下一行。
这个问题困扰了我将近一个星期，现在感谢任何帮助或指向正确方向的指针。

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

更新：

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

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

4

2 回答 2

2

哦，我误解了这个问题。他要求使用可调整大小的网格而不是等高的列。

这是一个非常简单的示例，说明如何使用 jQuery 将垂直调整大小应用于某些容器

此 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

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

希望这可以帮助。

于 2013-02-26T13:35:24.503 回答
0

没有默认的方法来处理这个问题，因为左右容器在向右或向左浮动时会脱离布局。

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

使用 jQuery 获得此功能的示例在此 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 技巧，但它们也有效。搜索“等高框”。

于 2013-02-26T11:02:54.100 回答