0

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

1 回答 1

0

您的问题需要使用 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>
于 2012-11-21T17:33:39.957 回答