html - 两个 div 之间的 div 根据需要使用多少

Question

我有 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>

Answer 1

您的问题需要使用 JS 来计算您正在使用的 div 的宽度(因为如果未设置宽度，溢出将不起作用)，然后设置正确的百分比宽度以使其流畅。

请注意，当您调整浏览器大小时，此答案将不起作用(太懒了)...

<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>