如何調整浮動元素的大小，使其總寬度始終爲父容器的100％？

我有一個左側容器內的三個div，每個div佔據容器寬度的33.3％（1/3）。我希望能夠調整它們中的任何一個，從而調整最接近的兄弟姐妹的大小，使得所有三個div的寬度始終爲容器寬度的100％。如何調整浮動元素的大小，使其總寬度始終爲父容器的100％？

jQuery的調整大小的呼叫：

var containerWidth = $("#container").width(); 
$(".box").resizable({ 
handles: "e", 
containment: "#container", 
resize: function(e,ui){ 
    var totalSize = ui.size.width; 
    ui.element.siblings(".box").each(function(){ 
    totalSize = totalSize + $(this).width(); 
    }); 
    var direction = totalSize > containerWidth ? -1 : 1; 
    var nextBox = ui.element.next(".box"); 
    var nextBoxWidth = nextBox.width(); 
    nextBox.width(nextBoxWidth + direction); 
} 
});

請使用的jsfiddle看問題，我遇到：

jsfiddle

在這個例子中，我得到了容器的寬度和比較它與調整大小事件期間框的總大小。這應該告訴我當前的盒子是否被縮小或縮小尺寸，因此最近的兄弟應該被縮小或縮小尺寸。這顯然不起作用。

有沒有人知道一種方法來完成我想要做的事情？也許有一種方法可以使用插件中的alsoResize選項？

來源

2016-08-26 Jake Zeitz

您只是將nextBox的寬度增加+/-1px。我想你應該替換爲下面一行：

var extraWidth = containerWidth - totalSize; 
nextBox.width(nextBoxWidth + extraWidth);

第一行告訴你有多寬是自由空間調整之後;您然後增加相同數量的nextBox寬度（請參閱here）

來源

2016-08-28 10:13:46 Dario

ahh是的，這是有道理的。我以爲因爲調整大小增加1px所需要做的只是改變1px ...我想知道這是爲什麼。現在要弄清楚爲什麼當調整大小開始時，它失去了它的高度。 –

如何調整浮動元素的大小，使其總寬度始終爲父容器的100％？

回答

相關問題