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>

两个div之间的div使用所需的数量

1 个答案: