Html 两个Div之间的Div根据需要使用尽可能多的数据

我有3个div，如下所示

<div>
    <div id='left' style='background:red;float:left;height:150px;width:150px;'>
    </div>
    <div id='right' style='background:green;float:right;height:150px;'>
        <p>Hallo</p>
    </div>
    <div id='center' style='background:blue;height:150px;'>
        <p>Hallo</p>
    </div>
</div>

哈罗

哈罗

只有在需要时，中心div才应填充空间
并且尽可能多地显示一个水平滚动条
最后一个div不应包装到下一行
就像我在上面的例子中得到的一样，即使不需要，它也会一直填充所有内容。
但我需要，右边的div尽可能靠近中间的div

<div>
    <div id='left' style='background:red;float:left;height:150px;width:150px;'>
    </div>
    <div id='center' style='background:blue;float:left;white-space: nowrap;overflow-x:auto;overflow-y:hidden;'>
        <p>Hallo</p>
        <p>Hallo</p>
        <p>Hallo</p>
        <p>Hallo</p>
        <p>Hallo</p>
        <p>Hallo</p>
        <p>Hallo</p>
    </div>
    <div id='right' style='background:green;height:150px;'>
        <p>Hallo</p>
    </div>
</div>

哈罗

哈罗

哈罗

哈罗

哈罗

哈罗

哈罗

哈罗

此示例显示了我想要的内容，但在本例中，如果我在中间div中添加一些字符，则会将右侧div换行，如下所示：

    <div>
    <div id='left' style='background:red;float:left;height:150px;width:150px;'>
    </div>
    <div id='center' style='background:blue;float:left;white-space: nowrap;overflow-x:auto;overflow-y:hidden;'>
        <p>Hallo aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>Hallo</p>
        <p>Hallo</p>
        <p>Hallo</p>
        <p>Hallo</p>
        <p>Hallo</p>
        <p>Hallo</p>
    </div>
    <div id='right' style='background:green;height:150px;'>
        <p>Hallo</p>
    </div>
</div>

嗨，aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

哈罗

哈罗

哈罗

哈罗

哈罗

哈罗

哈罗

您的问题需要使用JS计算正在使用的div的宽度（因为如果未设置宽度，则溢出将不起作用），然后将正确的百分比宽度设置为流体

请注意，当您调整浏览器大小（懒得这么做）时，此答案将不起作用

$（文档）.ready（函数（）{
var wrapperWidth=$（'#wrapper'）.width（）；//获取主包装的宽度
var wrapperRight=$（'#right'）.width（）；//获取右侧的宽度
var wrapperRight=（wrapperRight/wrapperWidth）*100；//获取右侧的宽度百分比
var wrapperLeft=（150/wrapperWidth）*100；//获取左侧的宽度百分比
var wrapperCenter=100-（wrapperLeft+wrapperRight）；//获取中心宽度的百分比
$（'#left'）.css（'width'，wrapperLeft+'%'）；//为width添加内联css
$（'#center'）.css（'width'，wrapperCenter+'%'）；//为width添加内联css
$（'#right'）.css（'width'，wrapperRight+'%'）；//为width添加内联css
});
嗨，aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

哈罗

哈罗

哈罗

哈罗

哈罗

哈罗

哈罗

更清楚地说明你想要什么，愚蠢的例子说明你不想要什么也帮不上忙。画一幅画或用文字解释。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
    var wrapperWidth = $('#wrapper').width(); // get width of main wrapper
    var wrapperRight = $('#right').width(); // get width of right
    var wrapperRight = (wrapperRight/wrapperWidth)*100; //get percentage width of right
    var wrapperLeft = (150/wrapperWidth)*100; //get percentage width of left
    var wrapperCenter = 100 - (wrapperLeft + wrapperRight); // get percentage width of center
    $('#left').css('width',wrapperLeft+'%'); // add inline css for width
    $('#center').css('width',wrapperCenter+'%'); // add inline css for width
    $('#right').css('width',wrapperRight+'%'); // add inline css for width
 });
</script>
<div id='wrapper' style='width: 100%;'>
    <div id='left' style='background:red;float:left;height:150px;width:150px;'>
    </div>
    <div id='center' style='background:blue;float:left; overflow-x: scroll; overflow-y: hidden;'>
        <p>Hallo aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>Hallo</p>
        <p>Hallo</p>
        <p>Hallo</p>
        <p>Hallo</p>
        <p>Hallo</p>
        <p>Hallo</p>
    </div>
    <div id='right' style='background:green;height:150px; float: left;'>
        <p>Hallo</p>
    </div>
</div>