css - 没有换行的并排、灵活宽度的div？

Question

我真的不确定如何最好地解释这一点。我正在尝试并排放置三个 div 元素；第一个(从左到右)是灵活宽度，第二个也是灵活宽度，第三个是静态宽度，它向右浮动。前两个位于与第三个相同级别的 div 中；那就是将前两个的总宽度保持在最大宽度以下。 Here is a jsfiddle我在做什么。

我的问题是，当中间 div 中的文本很长时，中间 div 将低于第一个，而不是让文本换行。我不能给中间的一个最大宽度，因为第一个 div 是灵活的，可以变得更小。知道我该如何解决这个问题吗？

我知道它可以通过使用表格来实现，但我真的不想这样做，除非这是唯一简单的解决方案。

编辑:我决定只做固定宽度。为此所需的工作量是不值得的，特别是考虑到大多数时候，永远不会使用灵活宽度无论如何对我来说。

Answer 1

如果您想要一个纯基于 css 的解决方案，那么它可能会有点困难，而且与浏览器的兼容性也不大。尽管您可以使用名为 display:table ; 和 display:table-cell; 的 css 属性来实现这一点。同样是较旧的浏览器，也许 IE-9 也不会；无法呈现它。

那么您应该选择 jQuery 解决方案。您可以使用以下代码-

$(document).ready(function(){
    var w = 400 - $('.inner_container .left_box').width();      
    $('.inner_container .middle')css('width',w);
});

谢谢。